Prezentacja rabatów w profilu klienta w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować szablon Topaz, aby umożliwić wyświetlanie rabatów w profilu klienta.

Wskazówka

Poniższa instrukcja działa dla każdego widoku szablonu Topaz, niezależnie od wybranych wersji elementów.

Zakładka Promocje będzie wyświetlać się tylko wtedy, gdy w banerze o nazwie CustomerProfileBanner będzie znajdował się przynajmniej jeden obrazek. W tym celu należy w panelu administracyjnym dodać taki banner. Wejdź w zakładkę Bannery i kliknij w przycisk Dodaj. W polu Nazwa wpisz CustomerProfileBanner. W miejscu Obrazki dodaj odpowiedni obrazek a następnie kliknij w przycisk Zapisz w prawym górnym rogu.

Następnie dodaj odpowiednie tłumaczenia.

Id: Product, Tekst: Towar
Id: Category, Tekst: Kategoria
Id: Quantity, Tekst: Ilość
Id: Netto, Tekst: Netto
Id: BundleThreshold, Tekst: Próg pakietowy
Id: Threshold, Tekst: Próg
Id: AllProducts, Tekst: Wszystkie produkty
Id: Back, Tekst: Powrót
Id: CurrentPromotions, Tekst: Aktualne <b>promocje</b>
Id: YourDiscounts, Tekst: Twoje <b>rabaty</b>
Id: ValidTo, Tekst: Ważny do
Id: ValidLifetime, Tekst: Ważny bezterminowo
Id: ValidFrom, Tekst: Ważny od
Id: Promotions, Tekst: Promocje
Id: ForRegularCustomer, Tekst: Dla stałego klienta
Id: ForNewCustomer, Tekst: Dla nowego klienta
Id: NoDiscountsInfo, Tekst: Aktualnie nie mamy rabatów przygotowanych dla Ciebie.

Wskazówka

Tłumaczenia możesz dodać w panelu administracyjnym, wchodząc na zakładkę Tłumaczenia a następnie klikając w przycisk Dodaj. Po uzupełnieniu pól kliknij w przycisk Dodaj.

Kolejnym krokiem jest modyfikacja kodu szablonu. W pierwszej kolejności należy dodać zakładkę Promocje w profilu klienta. W plikach szablonu w folderze static-elements/customer-profile znajduje się plik o nazwie customer-profile.html. Narzędziem wyszukiwania wyszukaj w nim frazę inputs-container-js. Nad znalezioną linią powinien znajdować się tag <ul/>. Nad tym tagiem wklej poniższy kod.


{% if config.Banners['CustomerProfileBanner'].Images[0]-%}
<li class="discounts-js" data-template="discounts/discounts">
    <span>{{ translations.Promotions }}</span>
</li>
{% endif -%}

{% if config.Banners['CustomerProfileBanner'].Images[0]-%}

<span>{{ translations.Promotions }}</span>

</li>

{% endif -%}

Następnie należy dodać pliki odpowiedzialne za wyświetlanie promocji po kliknięciu w zakładkę. W folderze partials/customer dodaj folder o nazwie discounts a w nim trzy pliki:

discount-details.html
discount-elements.html
discounts.html

W pliku discount-details.html wklej poniższy kod.


{% assign discount = customer-profile.DiscountERPDetails -%}

{% if discount.Description != '' and discount.Description != null  -%}
   {{discount.Description}}  
{% endif -%}

{% if discount.Thresholds -%}
    {% for threshold in discount.Thresholds -%}
    <div class="discounts__narrow-container" >
      <strong>{{translations.Threshold}}: </strong>
      {% if threshold.ThresholdType == 1 -%}
          {{threshold.Threshold | ToPrice}} {{threshold.ThresholdSymbol}}
      {% else -%}
          {{threshold.Threshold}}
      {% endif -%}
  </div>
  <div class="discounts__narrow-container"><strong>{{translations.QuantityThreshold}}:</strong> {{threshold.ThresholdMinPositionsCount}}</div>
  <div class="discounts__elements" >
      {% include 'partials/customer/discounts/discount-elements.html' with threshold -%}
  </div>
{% endfor -%}
{% else -%}
<div class="discounts__elements">
  {% include 'partials/customer/discounts/discount-elements.html' with discount -%}
</div>
{% endif -%}

<button class="primary-action-button discountsDetailsButton-js">{{translations.Back}}</button>

{% assign discount = customer-profile.DiscountERPDetails -%}

{% if discount.Description != '' and discount.Description != null -%}

{% endif -%}

{% if discount.Thresholds -%}

{% for threshold in discount.Thresholds -%}

<strong>{{translations.Threshold}}: </strong>

{% if threshold.ThresholdType == 1 -%}

{% else -%}

{% endif -%}

</div>

<div class="discounts__narrow-container"><strong>{{translations.QuantityThreshold}}:</strong> {{threshold.ThresholdMinPositionsCount}}</div>

{% include 'partials/customer/discounts/discount-elements.html' with threshold -%}

</div>

{% endfor -%}

{% else -%}

{% include 'partials/customer/discounts/discount-elements.html' with discount -%}

</div>

{% endif -%}

<button class="primary-action-button discountsDetailsButton-js">{{translations.Back}}</button>

W pliku discount-elements.html wklej poniższy kod.


{% assign discount = customer-profile.DiscountERPDetails -%}
{% if include -%}
{% assign elementsParent = include -%}
{% else -%}
{% assign elementsParent = discount -%}
{% endif -%}

{% assign anyGroup = false -%}
{% assign anyProduct = false -%}
{% assign anyThreshold = false -%}
{% assign anyBundleThreshold = false -%}
{% assign anyBundleQuantity = false -%}
{% assign anyTotalPrice = false -%}
{% assign anySubtotalPrice = false -%}
{% for element in elementsParent.Elements -%}
    {% if element.Group != null -%}
        {% assign anyGroup = true -%}
    {% endif -%}
    {% if element.Product != null -%}
        {% assign anyProduct = true -%}
    {% endif -%}
    {% if element.Threshold != null and element.Threshold > 0 -%}
        {% assign anyThreshold = true -%}
    {% endif -%}
    {% if element.BundleThreshold != null and element.BundleThreshold > 0 -%}
        {% assign anyBundleThreshold = true -%}
    {% endif -%}
    {% if element.BundleQuantity != null and element.BundleQuantity > 0 -%}
        {% assign anyBundleQuantity = true -%}
    {% endif -%}
    {% if element.FixedPrice -%}
        {% assign anyFixedPrice = true -%}
        {% if element.TotalPrice != null and element.TotalPrice > 0 -%}
            {% assign anyTotalPrice = true -%}
        {% endif -%}
        {% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%}
            {% assign anySubtotalPrice = true -%}
        {% endif -%}
    {% endif -%}
{% endfor -%}

<div class="discounts__row discounts__row__header">
    <div class="discounts__rowTitle">
        {% if anyGroup and anyProduct -%}
            {{translations.Product}}/{{translations.Category}}
        {% elseif anyGroup -%}
            {{translations.Category}}
        {% else -%}
            {{translations.Product}}
        {% endif -%}
    </div>
    {% if anyBundleQuantity -%}
        <div class="discounts__rowTitle">
            {{translations.Quantity}}
        </div>
    {% endif -%}
    {% unless anyFixedPrice and anySubtotalPrice == false -%}
        <div class="discounts__rowTitle">
            {% if anyFixedPrice and anySubtotalPrice -%}
				{{translations.Pro_Price}} {{translations.Netto | Downcase }}
			{% else -%}
				{{translations.Crt_Discount}}
			{% endif -%}
        </div>
    {% endunless -%}
    {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
        <div class="discounts__rowTitle">
            {% if anyFixedPrice and anyTotalPrice -%}
				{{translations.Pro_Price}} {{translations.Com_Brutto | Downcase}}
			{% elseif anyBundleThreshold -%}
				{{translations.BundleThreshold}}
			{% else -%}
				{{translations.Threshold}}
			{% endif -%}
        </div>
    {% endif -%}
</div>
{% for element in elementsParent.Elements -%}
<div class="discounts__row">
    <div class="discounts__cell">
        {% if element.Group != null -%}
            {% if element.Group.Url -%}
                <a href="{{ element.Group.Url }}">
            {% endif -%}
                    {{ element.Group.Name }}
            {% if element.Group.Url -%}
                </a>
            {% endif -%}
        {% elseif element.Product != null -%}
            {% if element.Product.Url -%}
                <a href="{{ element.Product.Url }}">
            {% endif -%}
                    {{ element.Product.NameNoHtml }}
            {% if element.Product.Url -%}
                </a>
            {% endif -%}
        {% else -%}
            {{ translations.AllProducts }}
        {% endif -%}
    </div>
    {% if anyBundleQuantity -%}
        <div class="discounts__cell">
            {% if element.BundleQuantity > 0 -%}
                <span class="discounts__mobile">
                    {{translations.Quantity}}
                </span> 
                <span>
                    {{ element.BundleQuantity | Normalize }}
                </span>
            {% endif -%}            
        </div>
    {% endif -%}
    {% unless anyFixedPrice and anySubtotalPrice == false -%}
        <div class="discounts__cell">
            <span class="discounts__mobile">
                {% if element.FixedPrice -%}
                    {% if element.SubtotalPrice > 0 -%}
                        {{ translations.Pro_Price | Downcase }} {{ translations.Netto | Downcase }}
                    {% endif -%}
                {% else -%}
                    {{ translations.Crt_Discount | Downcase }}
                {% endif -%}
            </span> 
            <span>
                {% if element.FixedPrice -%}
                    {% if element.SubtotalPrice > 0 -%}
                        {{ element.SubtotalPrice | ToPrice }}
                    {% endif -%}
                {% else -%}
                    {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
                        {{ element.Value | ToPrice }}
                    {% else -%}
                        {{ element.Value | Normalize }}
                    {% endif -%}
                {% endif -%}
                {{ element.ValueSymbol }}
            </span>
        </div>
    {% endunless -%}
    {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
        <div class="discounts__cell">
            <span class="discounts__mobile">
                {% if element.FixedPrice -%}
                    {% if element.TotalPrice > 0 -%}
                        {{ translations.Pro_Price | Downcase }} {{ translations.Com_Brutto | Downcase }}
                    {% endif -%}
                {% elseif element.BundleThreshold > 0 -%}
                    {{ translations.BundleThreshold | Downcase }}
                {% elseif element.Threshold > 0 -%}
                    {{ translations.Threshold | Downcase }}
                {% endif -%}
            </span>
            <span>
                {% if element.FixedPrice -%}
                    {% if element.TotalPrice > 0 -%}
                        {{ element.TotalPrice | ToPrice }}
                    {% endif -%}
                    {{ element.ValueSymbol }}
                {% elseif element.BundleThreshold > 0 -%}
                    {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
                        {{ element.BundleThreshold | ToPrice }}
                    {% else -%}
                        {{ element.BundleThreshold | Normalize }}
                    {% endif -%}
                    {{ element.BundleThresholdSymbol }}
                {% elseif element.Threshold > 0 -%}
                    {% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
                        {{ element.Threshold | ToPrice }}
                    {% else -%}
                        {{ element.Threshold | Normalize }}
                    {% endif -%}
                    {{ element.ThresholdSymbol }}
                {% endif -%}
            </span>
        </div>
    {% endif -%}
</div>
{% endfor -%}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

{% assign discount = customer-profile.DiscountERPDetails -%}

{% if include -%}

{% assign elementsParent = include -%}

{% else -%}

{% assign elementsParent = discount -%}

{% endif -%}

{% assign anyGroup = false -%}

{% assign anyProduct = false -%}

{% assign anyThreshold = false -%}

{% assign anyBundleThreshold = false -%}

{% assign anyBundleQuantity = false -%}

{% assign anyTotalPrice = false -%}

{% assign anySubtotalPrice = false -%}

{% for element in elementsParent.Elements -%}

{% if element.Group != null -%}

{% assign anyGroup = true -%}

{% endif -%}

{% if element.Product != null -%}

{% assign anyProduct = true -%}

{% endif -%}

{% if element.Threshold != null and element.Threshold > 0 -%}

{% assign anyThreshold = true -%}

{% endif -%}

{% if element.BundleThreshold != null and element.BundleThreshold > 0 -%}

{% assign anyBundleThreshold = true -%}

{% endif -%}

{% if element.BundleQuantity != null and element.BundleQuantity > 0 -%}

{% assign anyBundleQuantity = true -%}

{% endif -%}

{% if element.FixedPrice -%}

{% assign anyFixedPrice = true -%}

{% if element.TotalPrice != null and element.TotalPrice > 0 -%}

{% assign anyTotalPrice = true -%}

{% endif -%}

{% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%}

{% assign anySubtotalPrice = true -%}

{% endif -%}

{% endfor -%}

{% if anyGroup and anyProduct -%}

{{translations.Product}}/{{translations.Category}}

{% elseif anyGroup -%}

{% else -%}

{% endif -%}

</div>

{% if anyBundleQuantity -%}

</div>

{% endif -%}

{% unless anyFixedPrice and anySubtotalPrice == false -%}

{% if anyFixedPrice and anySubtotalPrice -%}

{% else -%}

{% endif -%}

</div>

{% endunless -%}

{% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}

{% if anyFixedPrice and anyTotalPrice -%}

{% elseif anyBundleThreshold -%}

{% else -%}

{% endif -%}

</div>

{% endif -%}

</div>

{% for element in elementsParent.Elements -%}

{% if element.Group != null -%}

{% if element.Group.Url -%}

{% endif -%}

{% if element.Group.Url -%}

</a>

{% endif -%}

{% elseif element.Product != null -%}

{% if element.Product.Url -%}

{% endif -%}

{% if element.Product.Url -%}

</a>

{% endif -%}

{% else -%}

{% endif -%}

</div>

{% if anyBundleQuantity -%}

{% if element.BundleQuantity > 0 -%}

</span>

<span>

</span>

{% endif -%}

</div>

{% endif -%}

{% unless anyFixedPrice and anySubtotalPrice == false -%}

{% if element.FixedPrice -%}

{% if element.SubtotalPrice > 0 -%}

{% endif -%}

{% else -%}

{% endif -%}

</span>

<span>

{% if element.FixedPrice -%}

{% if element.SubtotalPrice > 0 -%}

{% endif -%}

{% else -%}

{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}

{% else -%}

{% endif -%}

</span>

</div>

{% endunless -%}

{% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}

{% if element.FixedPrice -%}

{% if element.TotalPrice > 0 -%}

{% endif -%}

{% elseif element.BundleThreshold > 0 -%}

{% elseif element.Threshold > 0 -%}

{% endif -%}

</span>

<span>

{% if element.FixedPrice -%}

{% if element.TotalPrice > 0 -%}

{% endif -%}

{% elseif element.BundleThreshold > 0 -%}

{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}

{% else -%}

{% endif -%}

{% elseif element.Threshold > 0 -%}

{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}

{% else -%}

{% endif -%}

</span>

</div>

{% endif -%}

</div>

{% endfor -%}

W pliku discounts.html wklej poniższy kod.


{% assign name = 'CustomerProfileBanner' -%} 
{% if config.Banners[name] -%} 
{% assign banner = config.Banners[name] -%} 
<div class="discounts discountsMainTemplate-js">
    <h2 class="discounts__header" >{{translations.CurrentPromotions}}</h2>
        <div class="customerProfileBanner banner-discounts">
            {% assign imagesNumber = banner.Images | Size  -%}
            {% assign images = banner.Images -%}
                {% for img in images -%} 
                    <div class="banner-discounts__wrapper">
                        <figure class="banner-discounts__image">
                            <img alt="{{img.Alt | H}}" src="css/img/alo.gif" data-lazy="{{img.Url}}">
                        </figure>
                        <div class="banner-discounts__info">
                            {% if img.Heading != '' -%}
                                <p class="banner-discounts__title">{{img.Heading}}</p>
                            {% endif -%}
                            {% if img.Text != '' -%}
                                <p class="banner-discounts__title banner-discounts__title__small">{{img.Text}}</p>
                            {% endif -%}
                        </div>
                        {% if img.Link != '' -%}
                            <a aria-label="check" href="{{img.Link}}" class="primary-action-button" {% if img.TargetBlank == true -%} target="_blank" {% endif -%}>
                                {{translations.Check}}
                            </a>    
                        {% endif -%} 
                    </div>
                {% endfor -%}
                {% if imagesNumber == 0 %}
                    <div class="banner-discounts__wrapper">
                        <figure class="banner-discounts__image banner-discounts__image_placeholder">
                            {{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}
                        </figure>
                        <p class="banner-discounts__size">{% if header3 == true -%} 1118 x 534 {% else -%} 1920x680 {% endif -%}</p>
                    </div>
                {% endif %}
        </div>
        <h2 class="discounts__header" >{{translations.YourDiscounts}}</h2>
        <div class="discounts__container">

        {% assign discountsERP = customer-profile.DiscountsERP -%}
        {% assign discountString = customer-profile.DiscountQueryGET | H -%}
        {% assign paginationPageNo = discountsERP.PageNo -%}

        {% if paginationPageNo == 1 -%}
        {% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%}
        {% if orderValuesSize > 0 -%}
            {% assign anyDiscount = true -%}
            {% for orderValue in customer-profile.DiscountsEshop.OrderValue -%}
            <div class="discounts__item">
                <div class="discounts__value">
                    {{ orderValue.Discount | Normalize }} %
                </div>
                <div class="discounts__info">
                    <div class="discounts__name">
                        {{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }}
                    </div>
                    <div class="discounts__date">
                        {% if orderValue.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    </div>
                </div>
            </div>
            {% endfor -%}
        {% endif -%}
        {% if customer-profile.DiscountsEshop.Regular -%}
            {% assign anyDiscount = true -%}
            {% assign regular = customer-profile.DiscountsEshop.Regular -%}
            <div class="discounts__item">
                <div class="discounts__value">
                    {{ regular.Discount | Normalize }} %
                </div>
                <div class="discounts__info">
                    <div class="discounts__name">
                        {{ translations.ForRegularCustomer }}
                    </div>
                    <div class="discounts__date">
                        {% if regular.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    </div>
                </div>
            </div>
        {% endif -%}
        {% if customer-profile.DiscountsEshop.FirstOrder -%}
            {% assign anyDiscount = true -%}
            {% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%}
            <div class="discounts__item">
                <div class="discounts__value">
                    {{ firstOrder.Discount | Normalize }} %
                </div>
                <div class="discounts__info">
                    <div class="discounts__name">
                        {{translations.ForNewCustomer}}
                    </div>
                    <div class="discounts__date">
                        {% if firstOrder.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    </div>
                </div>
            </div>
        {% endif -%}
    {% endif -%}
    {% if discountsERP.TotalItems > 0 -%} 
        {% assign anyDiscount = true -%}
        {% for discount in discountsERP.Discounts -%}
        <div class="discounts__item">
            <div class="discounts__value discounts__value__details discountsDetails-js discounts-clickable" data-url="{{ page.Url }}?{{ discountString }}={{ discount.Id }}" data-template="partials/customer/discounts/discount-details.html">
                {{ translations.Details }} 
            </div>
            <div class="discounts__info">
                <div class="discounts__name">
                    {% if discount.Name != null -%}
                        {{ discount.Name }}
                    {% else -%}
                        {{ translations.AllProducts }}
                    {% endif -%}            </div>
                <div class="discounts__date">
                    {% if discount.DateTill -%}
                        {% if discount.DateFrom -%}
                            <div>{{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}</div>
                        {% endif -%}
                        {{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                </div>
            </div>
        </div>
        {% endfor -%}
        </div>
    {% endif -%}
    {% endif -%}
    {% if discountsERP.TotalItems > 10 -%}
    <nav>
        {% assign tabName = 'discounts/discounts' -%}
        {% assign sectionName = 'DiscountsERP' -%}
        {% include 'partials/customer/profile-pagination.html' -%}
    </nav>
    {% endif -%}
</div>
{% unless anyDiscount -%}
    {{ translations.NoDiscountsInfo }}
{% endunless -%}
<div class="discounts discounts__details-container discountsDetailsTemplate-js hidden">
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

{% assign name = 'CustomerProfileBanner' -%}

{% if config.Banners[name] -%}

{% assign banner = config.Banners[name] -%}

<h2 class="discounts__header" >{{translations.CurrentPromotions}}</h2>

{% assign imagesNumber = banner.Images | Size -%}

{% assign images = banner.Images -%}

{% for img in images -%}

</figure>

{% if img.Heading != '' -%}

<p class="banner-discounts__title">{{img.Heading}}</p>

{% endif -%}

{% if img.Text != '' -%}

{% endif -%}

</div>

{% if img.Link != '' -%}

</a>

{% endif -%}

</div>

{% endfor -%}

{% if imagesNumber == 0 %}

{{'css/img/img-placeholder.jpg' | Img: '', translations.DefaultImage}}

</figure>

<p class="banner-discounts__size">{% if header3 == true -%} 1118 x 534 {% else -%} 1920x680 {% endif -%}</p>

</div>

{% endif %}

</div>

<h2 class="discounts__header" >{{translations.YourDiscounts}}</h2>

{% assign discountsERP = customer-profile.DiscountsERP -%}

{% assign discountString = customer-profile.DiscountQueryGET | H -%}

{% assign paginationPageNo = discountsERP.PageNo -%}

{% if paginationPageNo == 1 -%}

{% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%}

{% if orderValuesSize > 0 -%}

{% assign anyDiscount = true -%}

{% for orderValue in customer-profile.DiscountsEshop.OrderValue -%}

{{ orderValue.Discount | Normalize }} %

</div>

{{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }}

</div>

{% if orderValue.DateTill -%}

{{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endfor -%}

{% endif -%}

{% if customer-profile.DiscountsEshop.Regular -%}

{% assign anyDiscount = true -%}

{% assign regular = customer-profile.DiscountsEshop.Regular -%}

{{ regular.Discount | Normalize }} %

</div>

</div>

{% if regular.DateTill -%}

{{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endif -%}

{% if customer-profile.DiscountsEshop.FirstOrder -%}

{% assign anyDiscount = true -%}

{% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%}

{{ firstOrder.Discount | Normalize }} %

</div>

</div>

{% if firstOrder.DateTill -%}

{{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endif -%}

{% if discountsERP.TotalItems > 0 -%}

{% assign anyDiscount = true -%}

{% for discount in discountsERP.Discounts -%}

</div>

{% if discount.Name != null -%}

{% else -%}

{% endif -%} </div>

{% if discount.DateTill -%}

{% if discount.DateFrom -%}

<div>{{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}</div>

{% endif -%}

{{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endfor -%}

</div>

{% endif -%}

{% if discountsERP.TotalItems > 10 -%}

<nav>

{% assign tabName = 'discounts/discounts' -%}

{% assign sectionName = 'DiscountsERP' -%}

{% include 'partials/customer/profile-pagination.html' -%}

</nav>

{% endif -%}

</div>

{% unless anyDiscount -%}

{% endunless -%}

</div>

Aby dodać odpowiednie style do zakładki z promocjami znajdź folder css/partials/customer i dodaj w nim folder o nazwie discounts a w nim plik o nazwie discounts-g.css. Do tego pliku wklej poniższy kod.


.banner-discounts{margin:0 auto;background-color:#f2f2f2;height:auto}.banner-discounts__list{width:100%;height:100%}.banner-discounts__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.banner-discounts a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.banner-discounts figure{margin:0}.banner-discounts__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.banner-discounts__image img[src="css/img/alo.gif"]{width:100%!important;height:100%!important}.banner-discounts__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.banner-discounts__info{position:absolute;left:10%;bottom:33%;width:80%}.banner-discounts__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.banner-discounts__title.banner-discounts__title__small{line-height:1.5;font-size:14px;margin-top:10px}.banner-discounts__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.banner-discounts__size{position:absolute;font-size:30px;color:gray;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}.banner-discounts .slick-track{height:100%}.banner-discounts .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.banner-discounts .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-arrow:before{color:#fff;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width:599px){.banner-discounts .slick-arrow:before{font-size:15px}}.banner-discounts .slick-prev,.banner-discounts .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.banner-discounts .slick-prev :hover,.banner-discounts .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-list{padding:0!important;height:100%}.banner-discounts .slick-prev:hover,.banner-discounts .slick-next:hover{outline:none}.banner-discounts .slick-prev.slick-disabled:before,.banner-discounts .slick-next.slick-disabled:before,.banner-discounts .slick-prev.slick-disabled,.banner-discounts .slick-next.slick-disabled{outline:none;display:none}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.banner-discounts .slick-prev{left:0;border-radius:0 25px 25px 0}.banner-discounts [dir='rtl'] .slick-prev{right:0;left:auto}.banner-discounts .slick-next{right:0;border-radius:25px 0 0 25px}.banner-discounts .slick-arrow.slick-next:before{left:3px}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{width:4px;height:4px;content:" "}.banner-discounts [dir='rtl'] .slick-next{right:auto;left:0}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{width:10px;height:10px}.banner-discounts .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width:480px){.banner-discounts .banner-discounts__info{bottom:55%}.banner-discounts .banner-discounts__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}}!important;margin-top:0!important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .banner-discounts{background-color:{{settings.headerBgColor}}!important}.headerSection__banner .banner-discounts__wrapper{height:fit-content;width:79.9%!important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .banner-discounts__image_placeholder img{max-height:534px!important}@media screen and (max-width:1600px){.headerSection__banner{padding-left:3%;padding-right:3%}}.banner-discounts__title{font-size:28px}.banner-discounts__title.banner-discounts__title__small{font-size:13px}.banner-discounts__info{bottom:unset;top:80px}@media screen and (max-width:480px){.banner-discounts__image{width:100%;object-fit:cover;object-position:center}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}.discounts__header{padding:20px 0;font-weight:400}.discounts__container{margin-bottom:30px;display:flex;flex-wrap:wrap}.discounts__item{width:40%;padding:20px 20px 0 0;margin-right:60px;display:flex;height:80px}.discounts__name{text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.discounts__info{padding:7px;font-size:15px;width:calc(100% - 100px - 60px)}.discounts__date{color:#959494;padding-top:5px}.discounts__value{margin-right:10px;width:100px;max-height:50px;padding:20px 10px 0 10px;text-align:center;color:{{settings.primaryBtnFontColor}};border:2px solid{{settings.primaryBtnBorderColor}};background-color:{{settings.primaryBtnBgColor}};font-size:20px}.discounts__value.discounts-clickable{cursor:pointer}.discounts__value.discounts-clickable:hover{background-color:{{settings.primaryBtnHoverBgColor}};border:2px solid{{settings.primaryBtnHoverBorderColor}};color:{{settings.primaryBtnHoverFontColor}}}.discounts__value__details{font-size:17px}.discounts__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.discounts__row:last-of-type{border-bottom:none;margin-bottom:20px}.discounts__rowTitle{font-size:15px;text-align:left;font-weight:400}.discounts__rowTitle:first-child{width:35%}.discounts__cell:first-child{width:35%}@media (min-width:767px){.discounts__mobile{display:none}}@media screen and (max-width:1200px){.discounts__header{text-align:center}.discounts__item{width:90%;margin-left:auto;margin-right:auto}}@media screen and (max-width:767px){.discounts__row{flex-wrap:wrap}.discounts__row__header{display:none}.discounts__rowTitle{width:auto!important}.discounts__cell{padding-right:20px;padding-top:10px;width:auto!important}.discounts__details-container{padding:20px}}@media only screen and (max-width:480px){.discounts__item{width:90%;padding:20px 0 20px 0;height:70px}.discounts__value{width:100px;font-size:17px}.discounts__info{padding:5px;font-size:14px}.discounts__date{padding-top:5px}}

.banner-discounts{margin:0 auto;background-color:#f2f2f2;height:auto}.banner-discounts__list{width:100%;height:100%}.banner-discounts__wrapper{width:100%;display:flex;justify-content:center;padding:0;margin:0;box-sizing:border-box;position:relative}.banner-discounts a{position:absolute;bottom:8%;left:10%;text-decoration:none;width:230px;box-sizing:border-box;padding:16px}.banner-discounts figure{margin:0}.banner-discounts__image img{box-sizing:border-box;padding:0;margin:0;object-fit:cover;min-height:170px;max-width:100%;width:100%;object-position:50% 50%}.banner-discounts__image img[src="css/img/alo.gif"]{width:100%!important;height:100%!important}.banner-discounts__image_placeholder img{object-fit:contain;background-color:#f2f2f2;max-height:680px}.banner-discounts__info{position:absolute;left:10%;bottom:33%;width:80%}.banner-discounts__title{margin:0;padding:0;font-weight:300;color:{{settings.bannerFontColor}};display:block;font-size:48px}.banner-discounts__title.banner-discounts__title__small{line-height:1.5;font-size:14px;margin-top:10px}.banner-discounts__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0}.banner-discounts__size{position:absolute;font-size:30px;color:gray;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}.banner-discounts .slick-track{height:100%}.banner-discounts .slick-arrow{background-color:{{settings.sliderBgColor}};padding:20px}.banner-discounts .slick-arrow:hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-arrow:before{color:#fff;position:absolute;right:0;left:10px;top:47%;transform:translateY(-50%);font-size:20px}@media only screen and (max-width:599px){.banner-discounts .slick-arrow:before{font-size:15px}}.banner-discounts .slick-prev,.banner-discounts .slick-next{font-size:0;line-height:0;position:absolute;top:51%;display:block;width:30px;height:155px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;border:none;outline:none;background-color:{{settings.sliderBgColor}};opacity:.6;z-index:8}.banner-discounts .slick-prev :hover,.banner-discounts .slick-next :hover{background-color:{{settings.sliderHoverBgColor}}}.banner-discounts .slick-list{padding:0!important;height:100%}.banner-discounts .slick-prev:hover,.banner-discounts .slick-next:hover{outline:none}.banner-discounts .slick-prev.slick-disabled:before,.banner-discounts .slick-next.slick-disabled:before,.banner-discounts .slick-prev.slick-disabled,.banner-discounts .slick-next.slick-disabled{outline:none;display:none}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{color:{{settings.sliderArrowColor}};fill:{{settings.sliderArrowColor}};opacity:.8}.banner-discounts .slick-prev{left:0;border-radius:0 25px 25px 0}.banner-discounts [dir='rtl'] .slick-prev{right:0;left:auto}.banner-discounts .slick-next{right:0;border-radius:25px 0 0 25px}.banner-discounts .slick-arrow.slick-next:before{left:3px}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);-webkit-transform:rotate(135deg)}.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{border:solid{{settings.sliderArrowColor}};border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before{width:4px;height:4px;content:" "}.banner-discounts [dir='rtl'] .slick-next{right:auto;left:0}.banner-discounts [dir='rtl'] .slick-next:before,.banner-discounts .slick-prev:before,.banner-discounts .slick-next:before,.banner-discounts [dir='rtl'] .slick-prev:before{width:10px;height:10px}.banner-discounts .slick-arrow:hover:before{border-color:{{settings.sliderHoverArrowColor}}}@media screen and (max-width:480px){.banner-discounts .banner-discounts__info{bottom:55%}.banner-discounts .banner-discounts__title{font-size:20px}}.headerSection__bannerBg{width:100%;height:fit-content;background-color:{{settings.headerBgColor}}!important;margin-top:0!important}.headerSection__banner{display:block;width:100%;margin:0 auto;height:fit-content;max-width:1400px;margin:0 auto;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative;background-color:{{settings.headerBgColor}}}.headerSection__banner .banner-discounts{background-color:{{settings.headerBgColor}}!important}.headerSection__banner .banner-discounts__wrapper{height:fit-content;width:79.9%!important;float:right;margin-left:auto;margin-right:0}.headerSection__banner .banner-discounts__image_placeholder img{max-height:534px!important}@media screen and (max-width:1600px){.headerSection__banner{padding-left:3%;padding-right:3%}}.banner-discounts__title{font-size:28px}.banner-discounts__title.banner-discounts__title__small{font-size:13px}.banner-discounts__info{bottom:unset;top:80px}@media screen and (max-width:480px){.banner-discounts__image{width:100%;object-fit:cover;object-position:center}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}@media screen and (max-width:1390px){.headerSection__banner .banner-discounts__wrapper{width:100%!important}}.discounts__header{padding:20px 0;font-weight:400}.discounts__container{margin-bottom:30px;display:flex;flex-wrap:wrap}.discounts__item{width:40%;padding:20px 20px 0 0;margin-right:60px;display:flex;height:80px}.discounts__name{text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.discounts__info{padding:7px;font-size:15px;width:calc(100% - 100px - 60px)}.discounts__date{color:#959494;padding-top:5px}.discounts__value{margin-right:10px;width:100px;max-height:50px;padding:20px 10px 0 10px;text-align:center;color:{{settings.primaryBtnFontColor}};border:2px solid{{settings.primaryBtnBorderColor}};background-color:{{settings.primaryBtnBgColor}};font-size:20px}.discounts__value.discounts-clickable{cursor:pointer}.discounts__value.discounts-clickable:hover{background-color:{{settings.primaryBtnHoverBgColor}};border:2px solid{{settings.primaryBtnHoverBorderColor}};color:{{settings.primaryBtnHoverFontColor}}}.discounts__value__details{font-size:17px}.discounts__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding-bottom:5px;border-bottom:1px solid #f2f2f2;margin-bottom:5px;font-size:13px;font-weight:300;align-items:center}.discounts__row:last-of-type{border-bottom:none;margin-bottom:20px}.discounts__rowTitle{font-size:15px;text-align:left;font-weight:400}.discounts__rowTitle:first-child{width:35%}.discounts__cell:first-child{width:35%}@media (min-width:767px){.discounts__mobile{display:none}}@media screen and (max-width:1200px){.discounts__header{text-align:center}.discounts__item{width:90%;margin-left:auto;margin-right:auto}}@media screen and (max-width:767px){.discounts__row{flex-wrap:wrap}.discounts__row__header{display:none}.discounts__rowTitle{width:auto!important}.discounts__cell{padding-right:20px;padding-top:10px;width:auto!important}.discounts__details-container{padding:20px}}@media only screen and (max-width:480px){.discounts__item{width:90%;padding:20px 0 20px 0;height:70px}.discounts__value{width:100px;font-size:17px}.discounts__info{padding:5px;font-size:14px}.discounts__date{padding-top:5px}}

Ostatnim krokiem jest dodanie kodu JavaScript. Znajdź plik layout1.js i na końcu pliku wklej poniższy kod.


function customerProfileBannerSlick() {
    $(".customerProfileBanner").not('.slick-initialized').slick({
        lazyLoad: 'progressive',
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        draggable: false,
        autoplay: true,
        autoplaySpeed: 8000
    });
}

$('li.discounts-js').on('click', function(e) {
    $(function() {
            var checkDiv = setInterval(function(){
               if($('.customerProfileBanner').length > 0) {
                   customerProfileBannerSlick();
               } 
            }, 100); 
        });
    
});

$('body').on('click', '.discountsDetails-js', function(e) {
    $('.discountsDetailsTemplate-js').removeClass('hidden');
    $('.discountsMainTemplate-js').addClass('hidden');
    window.scroll(top);
    var discountDetailsUrl = $(e.currentTarget).data('url');
    var discountDetailsTemplate = $(e.currentTarget).data('template');
    var content = $('.discountsDetailsTemplate-js');
    $.get(discountDetailsUrl, { __collection:'customer-profile.DiscountERPDetails', __template:discountDetailsTemplate }, function(result){
        if(result && result.collection && result.template){
            content.html(result.template);

        }
    });
});

$('body').on('click', '.discountsDetailsButton-js', function(e) {
    $('.discountsDetailsTemplate-js').addClass('hidden');
    $('.discountsMainTemplate-js').removeClass('hidden');
});

function customerProfileBannerSlick() {

$(".customerProfileBanner").not('.slick-initialized').slick({

lazyLoad: 'progressive',

infinite: true,

slidesToShow: 1,

slidesToScroll: 1,

draggable: false,

autoplay: true,

autoplaySpeed: 8000

});

}

$('li.discounts-js').on('click', function(e) {

$(function() {

var checkDiv = setInterval(function(){

if($('.customerProfileBanner').length > 0) {

customerProfileBannerSlick();

}

}, 100);

});

$('body').on('click', '.discountsDetails-js', function(e) {

$('.discountsDetailsTemplate-js').removeClass('hidden');

$('.discountsMainTemplate-js').addClass('hidden');

window.scroll(top);

var discountDetailsUrl = $(e.currentTarget).data('url');

var discountDetailsTemplate = $(e.currentTarget).data('template');

var content = $('.discountsDetailsTemplate-js');

$.get(discountDetailsUrl, { __collection:'customer-profile.DiscountERPDetails', __template:discountDetailsTemplate }, function(result){

if(result && result.collection && result.template){

content.html(result.template);

}

});

$('body').on('click', '.discountsDetailsButton-js', function(e) {

$('.discountsDetailsTemplate-js').addClass('hidden');

$('.discountsMainTemplate-js').removeClass('hidden');

});

Prezentacja rabatów w profilu klienta w szablonie Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt