@heseya/store-vue

@heseya/store-vue

Instalation

$ yarn add @heseya/store-core @heseya/store-vue
// or
$ npm i @heseya/store-core @heseya/store-vue

Usage

TODO

Variables

You need to add following code to your root css stylesheet. There you can set colors to be used by library

:root {
  --primary-color: #aaa;
  --secondary-color: #aaa;
  --gray: #aaa;
  --error-color: #aaa;

  --header-font-family-family: 'Lato';
  --text-font-family: 'Lato';
}

If You'd like to change default colors of texts and buttons/boxes in <hs-checkout> component, please add this variable set to :root selector

:root {
  --hs-checkout-price-initial-color: #aaa;
  --hs-checkout-price-discount-color: #aaa;
  --hs-checkout-price-color: #aaa;

  --hs-checkout-label-color: #aaa;
  --hs-checkout-value-color: #aaa;

  --hs-checkout-submit-background: #aaa;
  --hs-checkout-submit-background-hover: #aaa;
  --hs-checkout-submit-color: #aaa;
  --hs-checkout-submit-color-hover: #aaa;

  --hs-checkout-button-link-background: #aaa;
  --hs-checkout-button-link-background-hover: #aaa;
  --hs-checkout-button-link-color: #aaa;
  --hs-checkout-button-link-color-hover: #aaa;

  --hs-checkout-sale-background: #aaa;
  --hs-checkout-sale-color: #aaa;
  --hs-checkout-sale-button-background: #aaa;
  --hs-checkout-sale-button-background-hover: #aaa;
  --hs-checkout-sale-button-color: #aaa;
  --hs-checkout-sale-button-color-hover: #aaa;
}

<hs-checkout> customization

Every section of <hs-checkout> component can be replace with a custom one just by placing it in <template #section-name>. Here's list of every customizable section and explanation of its props:

• delivery-country receives:

  • value - value of currently choosen country e.g. PL
  • countries - list of all avaiable countries (array)
  • l - translations for noCountrySelected and deliveryCountry (object)
  • change - event for change currently choosen country, takes country code as parameter e.g. PL

• delivery-methods receives:

  • value - id of currently choosen delivery method e.g. afc3d72a-68f7-46d9-9c09-2dee35a49816
  • methods - list of available shipping methods (array)
  • l - translations for deliveryMethod, noDeliveryMethods, deliveryIn, days (object)
  • change - event for change currently choosen shipping method, takes id as parameter

• delivery-address receives:

  • value - whole form object
  • allowInvoice - true if invoice is allowed, false otherway
  • isInvoice - currently state of isInvoice (boolean)
  • l - translations with structure of: address, invoice, form: { name, address: formAddress, postCode, city, email, phone, comment }
  • update - event for update delivery address, takes form object
  • switchInvoice - event for switch visibility of invoice form, takes no arguments

• delivery-address-invoice receives:

  • formData - whole form.invoiceAddress object
  • l - translations with structure of: invoiceDetails, form: { companyName, companyAddress, postCode, city, vat }
  • update - event for update invoice address, takes form.invoiceAddress object

• delivery-state-checkout receives:

  • isAccepted - value of isStatuteAccepted (boolean)
  • l - translations with structure of: consets, statute: { accept, statute }
  • switch - event for switch statute acceptation, takes no arguments

• items receives:

  • items - list of products in the cart (array)
  • lock - true if child component(<cart-item>) is not allowed to be removed or its quantity can't be modified, false otherway

• coupon-code receives:

  • coupon-code - coupon code e.g. 301H8WWC (string)
  • cartValue - total value of products in the cart (with sales applied)
  • l - translations with structure of: { label, applied, codeDoesNotExists, codeUnavaliable}
  • coupon - event for coupon apply, takes coupon object

• summary-coupons receives:

  • coupons - list of applied coupons (array of coupon objects)
  • title - translation of appliedCoupons
  • couponRemove - event for coupon remove, takes id of coupon e.g. 07133fe8-6b42-4527-8edf-66df8c064874 (string)

• summary-sales receives:

  • sales - list of sales (array)
  • title - translation of appliedSales

• summary-details receives:

  • cartTotalInitial - total value of products in the cart (without sales applied)
  • cartTotalDiscount - total value of discount
  • shippingPriceInitial - initial value of shipping
  • shippingPriceDiscount - discounted value of shipping
  • totalOrderAmount - final value of order
  • l - translation with structure of: { cart, discount, delivery, total }

• summary-buttons receives:

  • isLoading - (boolean)
  • disabled - (boolean)
  • backToShopLink - URL to main page
  • l - translation with structure of: { buy, return: returnToShopUrl }