Как создать две отдельные корзины с simplecart.js

Бобылев Артём

26/12/2024

Привет, решил добавить новый магазин однотонной одежды со смайликами emoji-shop подмагазином однотонной одежды onlytone, чтобы не плодить сущностей: отдельных магазинов, доменов и почт.

Интерфейс emoji-shop несколько отличается от onlytone – у него свой дизайн и своя корзина со специфическими настройками.

Onlytone написан на hugo (генератор статичных сайтов), используя simplecart.js для реализации корзины.

Если создать второй магазин таким же образом, только внеся изменения в дизайн, то корзина окажется общей – товар, добавленный в подмагазине будет отображаться в корзине главного, причем неправильно, из-за своей логики.

Решение состоит в изменении переменной namespace в исходном коде:

44 // local variables for internal use
45	item_id					= 0,
46	item_id_namespace		= "SCI-",
47	sc_items				= {},
48	namespace				= space || "simpleCart",
49	selectorFunctions		= {},
50	eventFunctions			= {},
51	baseEvents				= {},

simplecart.js github Copyright (c) 2012 Brett Wejrowski Dual licensed under the MIT or GPL licenses.

Помимо изменения namespace “simpleCart”, потребуется также поменять все названия в html-шаблонах.

Базовый вариант html-разметки для работы simplecart.js выглядит так:

<div class="simpleCart_shelfItem">
    <img src="/images/item_thumb.jpg" class="item_thumb" />
    <h2 class="item_name"> Awesome T-shirt </h2>
 	<select class="item_size">
        <option value="Small"> Small </option>
        <option value="Medium"> Medium </option>
        <option value="Large"> Large </option>
    </select>
    <input type="text" value="1" class="item_Quantity">
    <span class="item_price">$35.99</span>
	<a class="item_add" href="javascript:;"> Add to Cart </a>
</div>

Поменяв namespace с “simpleCart” на “verySimpleCart”, нужно внести соответствующие изменения в html-разметку:

<div class="verySimpleCart_shelfItem">
...
<div class="verySimpleCart_items"></div>
...
(и во всех подобных местах)

Теперь содержимое корзины «подмагазина» хранится в localStorage под другим именем, отдельно от исходной корзины.

При таком подходе на сервере хранятся две копии файла simpleCart.js, что не является лучшим решением. На данный момент ограничился этим.