|Support Center

Ezpizee Shopping Cart documentations and guides

Learn the how to dynamically display product's price on your existing website or the website that you built using one of our CMS extensions.

It is driven by a set of our custom data attributes.

Attribute nameAttribute valueRequiredNotes
data-ezpzpriceYesRequired to be in the parent HTML element of the product detail or products listing.
data-ezpz-product-id${product_id}YesRequired to be in the HTML child element of the data-ezpz but the parent HTML element of data-ezpz-price-for.
data-ezpz-price-for${product_id}YesRequired to be in the HTML element that displays the product's price (i.e. 1,000).
data-ezpz-currency-code-for${product_id}YesRequired to be in the HTML element that displays the product's currency code (i.e. USD).
data-ezpz-currency-symbol-for${product_id}Yes Required to be in the HTML element that displays the product's currency symbol (i.e. $).

Book

US$10

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

A box of 10 pencil

US$4

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Ruler

US$0.5

From its medieval origins to the digital era, learn everything there is to know about the ubiquitous lorem ipsum passage.

<div class="row" data-ezpz="price">
    <div class="col-12 col-md-4" data-ezpz-product-id="1">
        <h3 class="my-demo-product-name">Book</h3>
        <div class="my-demo-product-price">
            <span data-ezpz-currency-code-for="1">US</span>
            <span data-ezpz-currency-symbol-for="1">$</span>
            <span data-ezpz-price-for="1">10</span>
        </div>
        <div class="my-demo-product-desc">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                It has survived not only five centuries, but also the leap into electronic typesetting,
                remaining essentially unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <div class="col-12 col-md-4" data-ezpz-product-id="2">
        <h3 class="my-demo-product-name">A box of 10 pencil</h3>
        <div class="my-demo-product-price">
            <span data-ezpz-currency-code-for="2">US</span>
            <span data-ezpz-currency-symbol-for="2">$</span>
            <span data-ezpz-price-for="2">4</span>
        </div>
        <div class="my-demo-product-desc">
            <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for
                previewing layouts and visual mockups.</p>
        </div>
    </div>
    <div class="col-12 col-md-4" data-ezpz-product-id="3">
        <h3 class="my-demo-product-name">Ruler</h3>
        <div class="my-demo-product-price">
            <span data-ezpz-currency-code-for="3">US</span>
            <span data-ezpz-currency-symbol-for="3">$</span>
            <span data-ezpz-price-for="3">0.5</span>
        </div>
        <div class="my-demo-product-desc">
            <p>From its medieval origins to the digital era, learn everything there is to know about the ubiquitous
                lorem ipsum passage.</p>
        </div>
    </div>
</div>