Интернет магазин на статическом сайте имея excell прайслист

2018-11-11 · 569 слов · 3 минут читать

excell · Магазин · учебник · hugo · cdn · snipcart · npm

Сейчас некоторые сервера банят, в том числе и те на которых работает netlify поэтому сейчас и не каждый сайт на нетлифи доступен в России. Так что нужно использовать proxy. А в тех местах где не блокируют сервера, сайт будет доступен. Помимо этого так как мы используем gohugo в нем есть поддержка многоязычности сайта, так что можно и с этим поиграть.. читайте как настроить прокси.

Выберем подходящий модуль/пакет npm для удобного и правильного конвертирования файлов excell в читаемый для api приложения snipcart (кнопки и корзины покупок) формат json.

я буду использовать вот этот npm

https://www.npmjs.com/package/excel-as-json

потому что он имеет более понятную документацию, хоть и требует для конвертации только файлы *.xlsx

##Погнали

Первое это нужно устновить npm:

заходим на этот сайт

https://www.npmjs.com/get-npm и нажимаем кнопку установить фото с сайта npm

далее проверяем правильно ли устновилось, и работает ли , если что корректируем в переменных средах..

если уже есть npm, но версия устарела то обновить можно командой в командной строке npm install npm@latest -g

дальше устанавливаем npm пакет excell-as-json https://www.npmjs.com/package/excel-as-json

для этого нужно найти папку правильную в которую установятся этот модуль\пакет: итак нужно узнать где эта папка с npm пишем в командной строке npm list -g

он покажет путь и библиотеки, у меня такой: C:\Users\User\AppData\Roaming\npm

ВОБЩЩЕМ! заходим в командной строке в нужную папку C:\Users\User\AppData\Roaming\npm\ и пишем там в консоли npm i excel-as-json

чтобы устновился этот модуль безо всяких ошибок. (ошибки могут быть если не в ту папку) вот как выглядит без ошибок : фото

далее в инструкции сказано:

Use

convertExcel = require(‘excel-as-json’).processFile; convertExcel(src, dst, options, callback);

это мы должны написать такой файл.js чтобы выполнить его через командную строку через node

напишем в папке с нашим файлом xlsx этот файл

и делаем страницу или сайт для товаров

ну например по примеру из туториала сделаем сайт, а на этом сайте просто прикрепим ссылку на наш МАГАЗИН

делаем сайт по туториалу

далее меняем в файле footer.html api key для snipcart на свой key который дают пользователям snipcart

теперь по примеру файла products.json который работает по ключевым для api snipcart словам называем наши столбики с данными в нашем прайслисте excell,

т.е. id, url, description, image, можно также дополнять различными параметрами необходимыми для разнообразного и разногабаритного товара, например в подсказках snipcart видим какие еще есть параметры CUSTOM FIELDS https://docs.snipcart.com/configuration/custom-fields

<a href="#"
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Tshirt"
    data-item-price="30.00"
    data-item-weight="20"
    data-item-url="http://myapp.com/products/bacon"
    data-item-description="A custom tshirt"
    data-item-custom1-name="Print label"
    data-item-custom2-name="Size"
    data-item-custom2-options="Small|Medium[+5.00]|Large[+10.00]|Kid[-5.00]"
    data-item-custom2-value="Medium"
    data-item-custom3-name="Gift"
    data-item-custom3-options="true|false">
    Buy now
</a>

И можно добавлять даже сразу через функции все это в экселе напрмиер data-item-custom2-options=“Small|Medium[+5.00]|Large[+10.00]|Kid[-5.00]” отвечает за разницу в цене товара исходя из размера: Medium на 5 денег больше, что и будет соответственно меняться в корзине

вот пример файла эксель:

файл xlsx с понятными для api snipcart данными

теперь используем npm excell-as-json.

папке где наш прайс и файл converter.js прайслист и конвертер файла в json который мы написали по инструкции: (подключили библиотеку, указали файл и куда его конвертировать), вот его содержание:

convertExcel = require('C:/Users/User/AppData/Roaming/npm/node_modules/excel-as-json').processFile;
convertExcel ('pricelist.xlsx', 'C:/gitproj/magazin/data/products.json');

Значит в этой папке в командной строке пишем команду node converter.js

Вот что получилось: json файл с данными из excell все получилось, товары из прайслиста теперь можно покупать! но помните что Snipcart берет % с продаж (*Для клиентов с месячным оборотом менее ₽ 33129, 2% будет заменено на ₽ 663 ежемесячно. Но по курсу доллара.)

А используя документацию snipcart в эксель можно добавлять и другие различные параметры для товаров.

чтож зальем теперь сайт с магазином на платформу netlify

Голый сайт gohugo просто так не деплоится на нетлифи, только при наличии какого нибудь поста hugo new post somepost.md если постов нету то не задеплоится.

Теперь мы имеем магазин, который при должной сноровке легко контролировать из excell =) https://vibrant-ptolemy-fad133.netlify.com/

Поделиться новостью