Porównywarka towarów w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał porównywarkę towarów.

Wskazówka

Niniejsza instrukcja przeznaczona jest dla sklepów w wersji 2020.2 lub nowszej!

Wskazówka

Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu – _ ’ „ itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

Pierwszy krok to przypisanie obiektu porównywarki do właściwej strony sklepu. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. W prawym górnym rogu kliknij przycisk z trzema kwadratami a następnie z rozwijanego menu wybierz opcję Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Porównywarka (9). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz comparer.html, a następnie zapisz. Kliknij na pole z napisem Porównywarka (9). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy obiekcie o nazwie comparison-tool, by pokazał się znak wyboru (tzw. „ptaszek”). A następnie zapisz.

Wskazówka

Jeśli na liście obiektów nie widzisz obiektu comparison-tool, wykonaj następujące czynności. Otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia. Kliknij w prawym górnym rogu na ikonkę z trzema kwadratami i z rozwiniętego menu wybierz opcję Edytuj ustawienia zaawansowane. Przejdź do zakładki Obiekty. Kliknij przycisk Dodaj. W polu Typ wybierz Porównywarka towarów a w polu Nazwa podaj comparison-tool, po czym kliknij Dodaj. Następnie wykonaj opisane wcześniej kroki.

Kolejny krok to dodanie tłumaczeń. W tym celu należy w Panelu Administratora wejść w Wygląd sklepu -> Ustawienia i wybrać zakładkę Tłumaczenia. Przycisk Dodaj pozwala na dodanie nowego tłumaczenia. Aby tłumaczenie zostało dodane, należy wprowadzić odpowiednie Id oraz frazę (Tekst) i zatwierdzić przyciskiem Dodaj. Lista Id oraz fraz do wprowadzenia:
1. NoItemsSelectedToCompare – Nie wybrano żadnych towarów do porównania
2. ProductsComparison – Porównanie towarów
3. ProductsComparisonRemove – Usuń porównanie
4. AddMoreProductsToCompare – Dodaj kolejne towary, które chcesz porównać (max. 3)
5. ShowProductsFromCategory – Pokaż inne towary z tej kategorii
6. ComparerReview – Ocena
7. ComparerAvailability – Dostępność
8. ComparerInformations – Informacje podstawowe
9. Manufacturer – Producent
10. Brand – Marka
11. ComparerTechnicalParameters – Parametry techniczne
12. RemoveFromComparisonTool – Usuń z porównania
13. AddedToComparisonTool – Dodano do porównania
14. ItemsToCompare – Możesz porównać od 2 do 4 towarów.
15. ProductsComparisonRemove – Usuń porównanie
16. MaxItemsInComparisonTool – Osiągnięto maksymalną ilość produktów

Wskazówka

Kopiując Id z powyższej instrukcji do Panelu Administracyjnego, upewnij się, że po danym Id nie została skopiowana żadna spacja.

Kolejnym krokiem jest utworzenie nowego pliku o nazwie comparer.html w głównym katalogu z plikami Twojego szablonu Topaz. Treść tego pliku powinna wyglądać następująco:


{% extends '_layout.html' -%}
{% block pageContent -%}
{% include 'staticElements/comparer/comparer.html' -%}
{% endblock -%}

{% extends '_layout.html' -%}

{% block pageContent -%}

{% include 'staticElements/comparer/comparer.html' -%}

{% endblock -%}

Możesz pominąć ten krok, jeżeli plik już istnieje, a jego treść jest identyczna jak powyżej.

Następnie otwórz folder staticElements. W nim utwórz nowy katalog o nazwie comparer, a w nim utwórz nowy plik o nazwie comparer.html. W pliku tym, umieść następujący kod:


{% include 'partials/common/breadcrumbs.html' -%}
{% assign comparer = comparison-tool -%}
{% assign amount = comparer.Products | Size %}
<div class="comparerContainer">
    <input type="hidden" id="amount" name="amount" value="{{amount}}" />
    <div class="page-padding">
        {% if amount == 0 %}
        <div class="row">
            <div class="noProducts">
                <span class="title">{{translations.NoItemsSelectedToCompare}}</span>
                <a href="{{config.DefinedPages.Home.Url}}" class="noProductsLinks">{{translations.Crt_BackToShop}}</a>
            </div>
        </div>
        {% else %}
        <div class="row" id="firstRow">
            <div class="topSection-info {% if amount == 4 -%} fourItems {% endif -%}">
                <span class="title">{{translations.ProductsComparison}} ({{amount}})</span>
                <div class="removeComparerContainer">
                    <span class="removeComparer">{{translations.ProductsComparisonRemove}}</span>
                    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                    <input type="hidden" name="__action" value="Product/ComparisonToolDelete" />
                    {% for p in comparer.Products -%}
                    <input type="hidden" name="productId" data-id="{{ p.Id }}" />
                    {% endfor -%}
                </div>
            </div>

            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div
                    class="topSection-productInfo {% if amount == 4 -%} fourItems {% endif -%} {% if index == amount and amount > 1  %} lastProduct {% endif -%}">
                    <div class="productImage">
                        <div aria-label="prevArrow" class="itemPrev hidden"><svg class="svgIcon svgIcon--arrowLeft svgItemPrev"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></div>
                        {% assign productAlt = p.NameNoHtml|H %}
                        <a href="{{p.Url}}">{{p|Img: 'medium', productAlt}}</a>
                        <div aria-label="nextArrow" class="itemNext hidden"><svg class="svgIcon svgItemNext"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></div>
                    </div>
                    <a data-id="{{p.Id}}" class="removeItem"></a>
                    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                    <input type="hidden" name="__action" value="Product/ComparisonToolDelete" />
                    <input type="hidden" name="productId" value="{{ p.Id }}" />
                    <div class="productName">{{p|A}}</div>
                    {% if p.Price %}
                    <div class="productPrice {% if p.PreviousPrice > p.Price -%} redPrice {% endif -%}">
                        {{p.Price|ToPrice}} <span class="currency">{{currency}}</span></div>
                    <div class="previousPrice">
                        {% if p.PreviousPrice > p.Price %}
                        {{p.PreviousPrice|ToPrice}} <span class="currency">{{currency}}</span>
                        {% endif %}
                    </div>
                    {% else -%}
                    <div class="productPrice">{{ translations.Com_AskForPrice }}</div>
                    <div class="previousPrice"></div>
                    {% endif %}
                    <div class="buttons">
                        {% if p.Price == null or p.Availability.Status == 3 or noProductInStock -%}
                        <div class="addToCartButton disableCartButton"></div>
                        {% else -%}
                        <a class="addToCartButton" href="{{p.Url}}">
                            <div>{{translations.Cmp_ToCart}}</div>
                        </a>
                        {% endif -%}

                        <div class="addToFavouriteButton productWishListAdd-js">
                            <input type="hidden" name="__action" value="Product/WishListAdd" />
                            <input type="hidden" name="productId" value="{{ p.Id }}" />
                            <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                            <span class="favouriteIcon"></span>
                        </div>
                    </div>
                </div>
                {% endfor -%}

                {% if amount == 1 -%}
                <div class="topSection-productInfo lastProduct ">
                    <div class="productImage">
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#exchange-{{settings.iconStyle}}"></use>
                        </svg>
                    </div>
                    <div class="addMoreProducts">{{translations.AddMoreProductsToCompare}}</div>
                    <div class="showMoreProducts"><a
                            href="{{config.DefinedPages.ProductList.Url}},{{comparer.Products[0].DefaultGroup}}">{{translations.ShowProductsFromCategory}}</a>
                    </div>
                </div>
                {% endif -%}
            </section>
        </div>

        {% if config.Reviews.Enabled %}
        <div class="row">
            <div class="property">
                <div class="propertyName">{{translations.ComparerReview}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="rating">
                        {% for i in (1..p.Rating)%}
                        <i>
                            <svg class="svgIcon stars productRating--color">
                                <use xlink:href="css/img/icons-sprite.svg#star-{{settings.iconStyle}}"></use>
                            </svg>
                        </i>
                        {% endfor %}
                        {% for i in (p.Rating..4)%}
                        <i>
                            <svg class="svgIcon stars">
                                <use xlink:href="css/img/icons-sprite.svg#star-{{settings.iconStyle}}"></use>
                            </svg>
                        </i>
                        {% endfor %}
                        <span class="ratingCount">({{ p.RatingCount }})</span>
                    </div>
                </div>
                {% endfor -%}
            </section>
        </div>
        {% endif -%}

        {% if config.Stock.Enabled == true -%}
        <div class="row">
            <div class="property">
                <div class="propertyName">{{translations.ComparerAvailability}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue">{{p.Availability.Text}}</div>
                </div>
                {% endfor -%}
            </section>
        </div>
        <div class="row">
            <div class="property">
                <div class="propertyName">{{translations.Com_StockLvl}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue">{{p.StockLevel.Text}}</div>
                </div>
                {% endfor -%}
            </section>
        </div>
        {% endif -%}

        <div class="row groupInfo">
            <div class="property">
                <div class="propertyName groupName">{{translations.ComparerInformations}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue"></div>
                </div>
                {% endfor -%}
            </section>
        </div>

        <div class="row">
            <div class="property">
                <div class="propertyName">{{translations.Manufacturer}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue">{{p.Manufacturer.Name}}</div>
                </div>
                {% endfor -%}
            </section>
        </div>

        <div class="row">
            <div class="property">
                <div class="propertyName">{{translations.Brand}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1%} lastProduct {% endif -%}">
                    <div class="propertyValue">{{p.Brand.Name}}</div>
                </div>
                {% endfor -%}
            </section>
        </div>

        <div class="row">
            <div class="property">
                <div class="propertyName">{{translations.Man_ManufacturerCode}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue">{{p.ManufacturerCode}}</div>
                </div>
                {% endfor -%}
            </section>
        </div>

        <div class="row">
            <div class="property">
                <div class="propertyName">{{translations.Pro_ProductCode}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue">{{p.Code}}</div>
                </div>
                {% endfor -%}
            </section>
        </div>

        {% if comparison-tool.Attributes != null -%}
        <div class="row groupInfo">
            <div class="property">
                <div class="propertyName groupName">{{translations.ComparerTechnicalParameters}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue"></div>
                </div>
                {% endfor -%}
            </section>
        </div>

        {% for attr in comparer.Attributes -%}
        <div class="row">
            <div class="property">
                <div class="propertyName">{{attr}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    {% assign attributeValue = p.Attributes[attr] -%}
                    {% assign lastItem = attributeValue | Last -%}
                    {% assign  attributesLength = attributeValue | Size -%}
                    <div class="propertyValue propertyValue-js">
                        {% if attributesLength ==  0 -%}
                        -
                        {% else -%}
                        {% for a in attributeValue -%}
                        {% if a != lastItem -%}
                        {{a}},
                        {% else -%}
                        {{a}}
                        {% endif -%}
                        {% endfor -%}
                        {% endif -%}
                    </div>
                </div>
                {% endfor -%}
            </section>
        </div>
        {% endfor -%}

        <div class="row ">
            <div class="property lastAttribute">
                <div class="propertyName">{{translations.Pro_Weight}}</div>
            </div>
            {% assign index = 0 -%}
            <section>
                {% for p in comparer.Products -%}
                {% assign index = index | Plus: 1 -%}
                <div
                    class="propertyValueContainer  lastAttribute {% if index == amount and amount > 1 %} lastProduct {% endif -%}">
                    <div class="propertyValue">{{p.Weight | Normalize}} {{ translations.Com_kg }}</div>
                </div>
                {% endfor -%}
            </section>
        </div>
        {% endif -%}
        {% endif -%}
    </div>
</div>
    {% include 'partials/newsletter-global.html' -%}

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

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

{% include 'partials/common/breadcrumbs.html' -%}

{% assign comparer = comparison-tool -%}

{% assign amount = comparer.Products | Size %}

{% if amount == 0 %}

<span class="title">{{translations.NoItemsSelectedToCompare}}</span>

<a href="{{config.DefinedPages.Home.Url}}" class="noProductsLinks">{{translations.Crt_BackToShop}}</a>

</div>

{% else %}

<span class="title">{{translations.ProductsComparison}} ({{amount}})</span>

<span class="removeComparer">{{translations.ProductsComparisonRemove}}</span>

{% for p in comparer.Products -%}

{% endfor -%}

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div

class="topSection-productInfo {% if amount == 4 -%} fourItems {% endif -%} {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

{% assign productAlt = p.NameNoHtml|H %}

<a href="{{p.Url}}">{{p|Img: 'medium', productAlt}}</a>

</div>

{% if p.Price %}

<div class="productPrice {% if p.PreviousPrice > p.Price -%} redPrice {% endif -%}">

{{p.Price|ToPrice}} <span class="currency">{{currency}}</span></div>

{% if p.PreviousPrice > p.Price %}

{{p.PreviousPrice|ToPrice}} <span class="currency">{{currency}}</span>

{% endif %}

</div>

{% else -%}

<div class="productPrice">{{ translations.Com_AskForPrice }}</div>

{% endif %}

{% if p.Price == null or p.Availability.Status == 3 or noProductInStock -%}

{% else -%}

<div>{{translations.Cmp_ToCart}}</div>

</a>

{% endif -%}

</div>

{% endfor -%}

{% if amount == 1 -%}

</svg>

</div>

<div class="addMoreProducts">{{translations.AddMoreProductsToCompare}}</div>

<div class="showMoreProducts"><a

href="{{config.DefinedPages.ProductList.Url}},{{comparer.Products[0].DefaultGroup}}">{{translations.ShowProductsFromCategory}}</a>

</div>

{% endif -%}

</section>

</div>

{% if config.Reviews.Enabled %}

<div class="propertyName">{{translations.ComparerReview}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

{% for i in (1..p.Rating)%}

<i>

</svg>

</i>

{% endfor %}

{% for i in (p.Rating..4)%}

<i>

</svg>

</i>

{% endfor %}

<span class="ratingCount">({{ p.RatingCount }})</span>

</div>

{% endfor -%}

</section>

</div>

{% endif -%}

{% if config.Stock.Enabled == true -%}

<div class="propertyName">{{translations.ComparerAvailability}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

<div class="propertyValue">{{p.Availability.Text}}</div>

</div>

{% endfor -%}

</section>

</div>

<div class="propertyName">{{translations.Com_StockLvl}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

<div class="propertyValue">{{p.StockLevel.Text}}</div>

</div>

{% endfor -%}

</section>

</div>

{% endif -%}

<div class="propertyName groupName">{{translations.ComparerInformations}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

</div>

{% endfor -%}

</section>

</div>

<div class="propertyName">{{translations.Manufacturer}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

<div class="propertyValue">{{p.Manufacturer.Name}}</div>

</div>

{% endfor -%}

</section>

</div>

<div class="propertyName">{{translations.Brand}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1%} lastProduct {% endif -%}">

<div class="propertyValue">{{p.Brand.Name}}</div>

</div>

{% endfor -%}

</section>

</div>

<div class="propertyName">{{translations.Man_ManufacturerCode}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

<div class="propertyValue">{{p.ManufacturerCode}}</div>

</div>

{% endfor -%}

</section>

</div>

<div class="propertyName">{{translations.Pro_ProductCode}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

</div>

{% endfor -%}

</section>

</div>

{% if comparison-tool.Attributes != null -%}

<div class="propertyName groupName">{{translations.ComparerTechnicalParameters}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

</div>

{% endfor -%}

</section>

</div>

{% for attr in comparer.Attributes -%}

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div class="propertyValueContainer {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

{% assign attributeValue = p.Attributes[attr] -%}

{% assign lastItem = attributeValue | Last -%}

{% assign attributesLength = attributeValue | Size -%}

{% if attributesLength == 0 -%}

{% else -%}

{% for a in attributeValue -%}

{% if a != lastItem -%}

{{a}},

{% else -%}

{% endif -%}

{% endfor -%}

{% endif -%}

</div>

{% endfor -%}

</section>

</div>

{% endfor -%}

<div class="propertyName">{{translations.Pro_Weight}}</div>

</div>

{% assign index = 0 -%}

{% for p in comparer.Products -%}

{% assign index = index | Plus: 1 -%}

<div

class="propertyValueContainer lastAttribute {% if index == amount and amount > 1 %} lastProduct {% endif -%}">

<div class="propertyValue">{{p.Weight | Normalize}} {{ translations.Com_kg }}</div>

</div>

{% endfor -%}

</section>

</div>

{% endif -%}

</div>

{% include 'partials/newsletter-global.html' -%}

Kolejnym krokiem jest dodanie odpowiedniego kodu do plików css, odpowiadających za wygląd porównywarki. W tym celu przejdź do katalogu css. Na końcu pliku layout.css wklej następujący kod:


.comparerContainer{font-family:{{settings.fontFamily}};background:{{settings.primaryPageBgColor}};max-width:1400px;margin:40px auto}.comparerContainer #firstRow{background:{{settings.primaryPageBgColor}} !important}.comparerContainer .row{width:100%;display:block;display:flex;flex-direction:row}.comparerContainer .row section{width:100%;display:inherit}.comparerContainer .groupInfo{background-color:#f8f8f8}.comparerContainer .lastProduct{border-right:none !important}.comparerContainer .noProducts{width:100%;margin-bottom:40px}.comparerContainer .noProducts .title{display:block;font-size:24px;line-height:32px;color:{{settings.primaryFontColor}}}.comparerContainer .noProducts .noProductsLinks{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .noProducts .noProductsLinks:hover{cursor:pointer}.comparerContainer .topSection-info{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .topSection-info .title{display:block;font-size:20px;line-height:32px;color:{{settings.primaryFontColor}};padding-right:10px}.comparerContainer .topSection-info .removeComparer{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .topSection-info .removeComparer:hover{cursor:pointer}.comparerContainer .topSection-productInfo{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;position:relative}.comparerContainer .topSection-productInfo .productImage{height:150px;position:relative}.comparerContainer .topSection-productInfo .productImage a{cursor:initial}.comparerContainer .topSection-productInfo .productImage .itemPrev,.comparerContainer .topSection-productInfo .productImage .itemNext{position:absolute;border-radius:50%;background-color:{{settings.sliderBgColor}};width:30px;height:30px;top:50%;border:none;transition:200ms}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover,.comparerContainer .topSection-productInfo .productImage .itemNext:hover{background-color:{{settings.linkFontColor}};border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover .svgIcon,.comparerContainer .topSection-productInfo .productImage .itemNext:hover .svgIcon{fill:{{settings.sliderHoverArrowColor}} !important;border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev{left:5px}.comparerContainer .topSection-productInfo .productImage .itemNext{right:5px}.comparerContainer .topSection-productInfo .productImage .svgItemPrev{padding-left:0px !important;margin-left:-9px !important;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important}.comparerContainer .topSection-productInfo .productImage .svgItemNext{float:right;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important;padding-top:0 !important;margin-right:-7px !important}.comparerContainer .topSection-productInfo .productImage img{display:block;margin:0 auto;max-height:150px;object-fit:contain;max-width:50%;cursor:pointer !important}.comparerContainer .topSection-productInfo .productImage .svgIcon{width:43px;height:34px;fill:#e5e5e5;margin:0 auto;display:block;padding-top:58px;padding-left:40px}.comparerContainer .topSection-productInfo .addMoreProducts{margin-top:10px;display:block;color:{{settings.secondaryFontColor}};text-align:center;font-size:14px;line-height:24px;margin-left:40px;font-weight:400}.comparerContainer .topSection-productInfo .showMoreProducts{font-weight:500;font-size:14px;line-height:24px;color:{{settings.linkFontColor}};margin-top:15px;margin-left:40px;text-align:center}.comparerContainer .topSection-productInfo .showMoreProducts>a:hover{cursor:pointer}.comparerContainer .topSection-productInfo .removeItem{position:absolute;top:10px;right:37px;background-color:{{settings.linkFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:15px;height:15px}.comparerContainer .topSection-productInfo .removeItem:hover{cursor:pointer}.comparerContainer .topSection-productInfo .productName{font-size:16px;line-height:24px;height:50px;margin-top:10px;margin-left:40px;color:{{settings.primaryFontColor}}}.comparerContainer .topSection-productInfo .productPrice{font-size:18px;line-height:26px;display:inline;font-weight:bold;color:{{settings.productPriceFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .redPrice{color:{{settings.ribbonPromotionColor}}}.comparerContainer .topSection-productInfo .previousPrice{font-size:14px;font-weight:400;display:inline;text-decoration:line-through;color:{{settings.productPricePreviousFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .currency{font-size:12px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:bold}.comparerContainer .topSection-productInfo .buttons{margin:30px 40px 50px;width:calc(100% - 80px);height:40px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.comparerContainer .topSection-productInfo .buttons .disableCartButton{visibility:hidden}.comparerContainer .topSection-productInfo .buttons .addToCartButton{width:75%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0}.comparerContainer .topSection-productInfo .buttons .addToCartButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton{border:1px solid {{settings.secondaryBtnBorderColor}};width:40px;height:40px;background-color:{{settings.primaryPageBgColor}};transition:200ms}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover{border-color:{{settings.secondaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover .favouriteIcon{background-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .wishList{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;background-color:{{settings.secondaryBtnHoverBorderColor}} !important}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .favouriteIcon{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);background-color:{{settings.primaryFontColor}};width:20px;height:20px;display:block;margin:10px auto 0}.comparerContainer .topSection-productInfo .buttons .wishListBorder{border-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .lastAttribute{border-bottom:1px solid {{settings.borderColor}}}.comparerContainer .property{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .property .propertyName{font-size:16px;color:{{settings.primaryFontColor}};font-weight:400;line-height:24px;text-align:left;padding:18px 10px;text-transform:capitalize}.comparerContainer .property .groupName{color:{{settings.secondaryFontColor}};font-size:14px;font-weight:bold;padding:8px 0 8px 10px;text-transform:capitalize}.comparerContainer .propertyValueContainer{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 80px);margin:18px 40px}.comparerContainer .propertyValueContainer .rating .stars{width:13px;height:13px}.comparerContainer .propertyValueContainer .rating .productRating--color{fill:{{settings.linkFontColor}}}.comparerContainer .propertyValueContainer .rating .ratingCount{font-size:14px;color:{{settings.secondaryFontColor}};line-height:24px;font-weight:400;margin-left:12px}.comparerContainer .propertyValueContainer .propertyValue{width:calc(100% - 80px);margin:18px 40px;font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};font-weight:300;word-break:break-word}.comparerContainer .propertyValueContainer .delivery{color:{{settings.linkFontColor}}}@media only screen and (max-width: 1350px){.comparerContainer .fourItems .removeItem{right:20px}.comparerContainer .fourItems .productName,.comparerContainer .fourItems .buttons{margin-left:20px;margin-right:20px}.comparerContainer .fourItems .buttons{width:calc(100% - 40px);margin-bottom:20px}.comparerContainer .fourItems .productPrice,.comparerContainer .fourItems .previousPrice{margin-left:20px;display:block}.comparerContainer .fourItems .previousPrice{height:0}.comparerContainer .twoItems{width:50%}.comparerContainer .propertyValueContainer .propertyValue,.comparerContainer .propertyValueContainer .rating{margin-left:20px;margin-right:20px}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 40px)}}

.comparerContainer{font-family:{{settings.fontFamily}};background:{{settings.primaryPageBgColor}};max-width:1400px;margin:40px auto}.comparerContainer #firstRow{background:{{settings.primaryPageBgColor}} !important}.comparerContainer .row{width:100%;display:block;display:flex;flex-direction:row}.comparerContainer .row section{width:100%;display:inherit}.comparerContainer .groupInfo{background-color:#f8f8f8}.comparerContainer .lastProduct{border-right:none !important}.comparerContainer .noProducts{width:100%;margin-bottom:40px}.comparerContainer .noProducts .title{display:block;font-size:24px;line-height:32px;color:{{settings.primaryFontColor}}}.comparerContainer .noProducts .noProductsLinks{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .noProducts .noProductsLinks:hover{cursor:pointer}.comparerContainer .topSection-info{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .topSection-info .title{display:block;font-size:20px;line-height:32px;color:{{settings.primaryFontColor}};padding-right:10px}.comparerContainer .topSection-info .removeComparer{display:block;margin-top:20px;font-size:14px;line-height:24px;color:{{settings.linkFontColor}}}.comparerContainer .topSection-info .removeComparer:hover{cursor:pointer}.comparerContainer .topSection-productInfo{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;position:relative}.comparerContainer .topSection-productInfo .productImage{height:150px;position:relative}.comparerContainer .topSection-productInfo .productImage a{cursor:initial}.comparerContainer .topSection-productInfo .productImage .itemPrev,.comparerContainer .topSection-productInfo .productImage .itemNext{position:absolute;border-radius:50%;background-color:{{settings.sliderBgColor}};width:30px;height:30px;top:50%;border:none;transition:200ms}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover,.comparerContainer .topSection-productInfo .productImage .itemNext:hover{background-color:{{settings.linkFontColor}};border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev:hover .svgIcon,.comparerContainer .topSection-productInfo .productImage .itemNext:hover .svgIcon{fill:{{settings.sliderHoverArrowColor}} !important;border:none !important}.comparerContainer .topSection-productInfo .productImage .itemPrev{left:5px}.comparerContainer .topSection-productInfo .productImage .itemNext{right:5px}.comparerContainer .topSection-productInfo .productImage .svgItemPrev{padding-left:0px !important;margin-left:-9px !important;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important}.comparerContainer .topSection-productInfo .productImage .svgItemNext{float:right;margin-top:-3px !important;fill:{{settings.sliderArrowColor}} !important;padding-top:0 !important;margin-right:-7px !important}.comparerContainer .topSection-productInfo .productImage img{display:block;margin:0 auto;max-height:150px;object-fit:contain;max-width:50%;cursor:pointer !important}.comparerContainer .topSection-productInfo .productImage .svgIcon{width:43px;height:34px;fill:#e5e5e5;margin:0 auto;display:block;padding-top:58px;padding-left:40px}.comparerContainer .topSection-productInfo .addMoreProducts{margin-top:10px;display:block;color:{{settings.secondaryFontColor}};text-align:center;font-size:14px;line-height:24px;margin-left:40px;font-weight:400}.comparerContainer .topSection-productInfo .showMoreProducts{font-weight:500;font-size:14px;line-height:24px;color:{{settings.linkFontColor}};margin-top:15px;margin-left:40px;text-align:center}.comparerContainer .topSection-productInfo .showMoreProducts>a:hover{cursor:pointer}.comparerContainer .topSection-productInfo .removeItem{position:absolute;top:10px;right:37px;background-color:{{settings.linkFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:15px;height:15px}.comparerContainer .topSection-productInfo .removeItem:hover{cursor:pointer}.comparerContainer .topSection-productInfo .productName{font-size:16px;line-height:24px;height:50px;margin-top:10px;margin-left:40px;color:{{settings.primaryFontColor}}}.comparerContainer .topSection-productInfo .productPrice{font-size:18px;line-height:26px;display:inline;font-weight:bold;color:{{settings.productPriceFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .redPrice{color:{{settings.ribbonPromotionColor}}}.comparerContainer .topSection-productInfo .previousPrice{font-size:14px;font-weight:400;display:inline;text-decoration:line-through;color:{{settings.productPricePreviousFontColor}};margin-left:40px}.comparerContainer .topSection-productInfo .currency{font-size:12px;line-height:18px;color:{{settings.primaryFontColor}};font-weight:bold}.comparerContainer .topSection-productInfo .buttons{margin:30px 40px 50px;width:calc(100% - 80px);height:40px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}.comparerContainer .topSection-productInfo .buttons .disableCartButton{visibility:hidden}.comparerContainer .topSection-productInfo .buttons .addToCartButton{width:75%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0}.comparerContainer .topSection-productInfo .buttons .addToCartButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton{border:1px solid {{settings.secondaryBtnBorderColor}};width:40px;height:40px;background-color:{{settings.primaryPageBgColor}};transition:200ms}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover{border-color:{{settings.secondaryBtnHoverBorderColor}};cursor:pointer}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton:hover .favouriteIcon{background-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .wishList{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/heart.svg) !important;background-color:{{settings.secondaryBtnHoverBorderColor}} !important}.comparerContainer .topSection-productInfo .buttons .addToFavouriteButton .favouriteIcon{-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/heart.svg);background-color:{{settings.primaryFontColor}};width:20px;height:20px;display:block;margin:10px auto 0}.comparerContainer .topSection-productInfo .buttons .wishListBorder{border-color:{{settings.secondaryBtnHoverBorderColor}}}.comparerContainer .lastAttribute{border-bottom:1px solid {{settings.borderColor}}}.comparerContainer .property{border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none;width:25%}.comparerContainer .property .propertyName{font-size:16px;color:{{settings.primaryFontColor}};font-weight:400;line-height:24px;text-align:left;padding:18px 10px;text-transform:capitalize}.comparerContainer .property .groupName{color:{{settings.secondaryFontColor}};font-size:14px;font-weight:bold;padding:8px 0 8px 10px;text-transform:capitalize}.comparerContainer .propertyValueContainer{width:35%;border-right:1px solid {{settings.borderColor}};border-bottom:1px solid {{settings.borderColor}};border-top:none;border-left:none}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 80px);margin:18px 40px}.comparerContainer .propertyValueContainer .rating .stars{width:13px;height:13px}.comparerContainer .propertyValueContainer .rating .productRating--color{fill:{{settings.linkFontColor}}}.comparerContainer .propertyValueContainer .rating .ratingCount{font-size:14px;color:{{settings.secondaryFontColor}};line-height:24px;font-weight:400;margin-left:12px}.comparerContainer .propertyValueContainer .propertyValue{width:calc(100% - 80px);margin:18px 40px;font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};font-weight:300;word-break:break-word}.comparerContainer .propertyValueContainer .delivery{color:{{settings.linkFontColor}}}@media only screen and (max-width: 1350px){.comparerContainer .fourItems .removeItem{right:20px}.comparerContainer .fourItems .productName,.comparerContainer .fourItems .buttons{margin-left:20px;margin-right:20px}.comparerContainer .fourItems .buttons{width:calc(100% - 40px);margin-bottom:20px}.comparerContainer .fourItems .productPrice,.comparerContainer .fourItems .previousPrice{margin-left:20px;display:block}.comparerContainer .fourItems .previousPrice{height:0}.comparerContainer .twoItems{width:50%}.comparerContainer .propertyValueContainer .propertyValue,.comparerContainer .propertyValueContainer .rating{margin-left:20px;margin-right:20px}.comparerContainer .propertyValueContainer .rating{width:calc(100% - 40px)}}

Do pliku layout-m.css wklej następujący kod:


@media only screen and (max-width: 768px){.oneItem{margin-left:20px !important;margin-right:20px !important;width:calc(100% - 40px) !important}.row>section{width:75% !important}.row>section .comparerSlider{width:50% !important}.row>section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.topSection-info .title,.topSection-info .removeComparer,.property .groupName,.property .propertyName{padding-left:20px !important}.noProducts{margin-left:20px}}@media only screen and (max-width: 580px){.row section{width:60% !important}.row .topSection-info,.row .property{width:40% !important}.previousPrice{display:block !important}}@media only screen and (max-width: 385px){.buttons{width:calc(100% - 10px) !important;margin-left:5px !important;margin-right:5px !important}.title{font-size:16px !important}.removeComparer{font-size:12px !important}}

@media only screen and (max-width: 768px){.oneItem{margin-left:20px !important;margin-right:20px !important;width:calc(100% - 40px) !important}.row>section{width:75% !important}.row>section .comparerSlider{width:50% !important}.row>section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.topSection-info .title,.topSection-info .removeComparer,.property .groupName,.property .propertyName{padding-left:20px !important}.noProducts{margin-left:20px}}@media only screen and (max-width: 580px){.row section{width:60% !important}.row .topSection-info,.row .property{width:40% !important}.previousPrice{display:block !important}}@media only screen and (max-width: 385px){.buttons{width:calc(100% - 10px) !important;margin-left:5px !important;margin-right:5px !important}.title{font-size:16px !important}.removeComparer{font-size:12px !important}}

Do pliku layout-d.css wklej następujący kod:


@media only screen and (max-width: 1150px){.comparerContainer .fourItems .buttons .addToCartButton{display:block !important;width:auto !important;padding:8px 15px !important}.comparerContainer .fourItems .buttons .addToFavouriteButton{margin:10px auto}}@media only screen and (min-width: 971px) and (max-width: 1050px){.buttons{margin-left:10px !important;margin-right:10px !important;width:calc(100% - 20px) !important}}@media only screen and (max-width: 970px){.row .property{border-right:none}.row section{width:75% !important}.row section .comparerSlider{width:50% !important}.row section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.copmarerContainer .topSection-info .buttons{width:calc(100% - 40px)}.copmarerContainer .topSection-info .removeItem{right:20px}.copmarerContainer .topSection-info .productName,.copmarerContainer .topSection-info .buttons{margin-left:20px;margin-right:20px}.copmarerContainer .topSection-info .productPrice,.copmarerContainer .topSection-info .previousPrice{margin-left:20px;display:block}.copmarerContainer .topSection-info .previousPrice{height:0}}

@media only screen and (max-width: 1150px){.comparerContainer .fourItems .buttons .addToCartButton{display:block !important;width:auto !important;padding:8px 15px !important}.comparerContainer .fourItems .buttons .addToFavouriteButton{margin:10px auto}}@media only screen and (min-width: 971px) and (max-width: 1050px){.buttons{margin-left:10px !important;margin-right:10px !important;width:calc(100% - 20px) !important}}@media only screen and (max-width: 970px){.row .property{border-right:none}.row section{width:75% !important}.row section .comparerSlider{width:50% !important}.row section .lastProduct{border-right:1px solid {{settings.borderColor}} !important}.comparerSlider .slick-track{height:calc(100% - 1px) !important}.copmarerContainer .topSection-info .buttons{width:calc(100% - 40px)}.copmarerContainer .topSection-info .removeItem{right:20px}.copmarerContainer .topSection-info .productName,.copmarerContainer .topSection-info .buttons{margin-left:20px;margin-right:20px}.copmarerContainer .topSection-info .productPrice,.copmarerContainer .topSection-info .previousPrice{margin-left:20px;display:block}.copmarerContainer .topSection-info .previousPrice{height:0}}

Następnie należy dodać odpowiedni kod do plików js. W tym celu, w plikach Topaza, otwórz folder js a następnie plik layout0.js. Odszukaj linijkę z frazą productListFunctions.init();. Pod znalezioną linijką znajduje się linia ze znakiem }. Pod nią wklej następujący kod:


	if($('body').find('.comparerContainer').index() >= 0) {
            comparerFunctions.init();
        }

if($('body').find('.comparerContainer').index() >= 0) {

comparerFunctions.init();

}

Otwórz plik layout1.js znajdujący się w tym samym katalogu. Poniższy kod możesz wkleić na samym początku pliku:


var comparerFunctions = {
    init: function() { 
        this.events();
    },

    events: function() {
        $(document).ready(function(){
            $('.propertyValue-js').each(function(index) {
                var t = $(this).text();
                t = t.replace(/([A-Z])/g, ' $1').trim();
                $(this).text(t);
            })

            $('.row').each(function() {
                if(!($(this).hasClass('groupInfo'))) {
                    $(this).children('.property').css('box-shadow', '2px 0 2px -2px #E5E5E5');
                    $(this).children('.topSection-info').css('box-shadow', '2px 0 2px -2px #E5E5E5');
                }
            });

            var amount = $('#amount').attr('value');
            var windowWidth = $(window).width();

            if (amount <= 2) {
                $('.topSection-productInfo').css('width', '50%');
                $('.propertyValueContainer').css('width', '50%');

                if(amount == 1 && windowWidth <= 768) {
                    $('.productPrice').addClass('oneItem');
                    $('.productName').addClass('oneItem');
                    $('.buttons').addClass('oneItem');
                    $('.lastProduct > *').css('margin-left', '10px', '!important');
                    $('.lastProduct > *').css('margin-right', '10px', '!important');
                } else if(amount == 1 && windowWidth <= 600) {
                    $('.topSection-productInfo').css('width', '100%', '!important');
                    $('.propertyValueContainer').css('width', '100%', '!important');
                    $('.lastProduct').css('display', 'none');
                }
            }

            if ((windowWidth <= 970 && amount > 2) || (windowWidth <= 742 && amount == 2)) {
                $(".row > section").addClass("comparerSlider");
                var slider = $('.comparerSlider').slick({
                    infinite: true,
                    slidesToShow: 2,
                    slidesToScroll:1,
                    draggable: false,
                    autoplay: false,
                    autoplaySpeed: 8000,
                    arrows:false,
                    swipe:false,                   
                    responsive: [
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 1,                               
                            }
                        }
                    ]
                });

                if(amount == 2) {
                    slider.slick('slickSetOption', 'infinite', false);
                }

                if(windowWidth <= 970 && windowWidth > 768 && amount > 2) {
                    showSliderArrows();
                }   

                if (windowWidth <= 768 && amount > 2) {
                    $(".itemPrev").removeClass('hidden');
                    $(".itemNext").removeClass('hidden');
                }

                if(windowWidth <= 742 && amount == 2) {
                    $(".itemNext").removeClass('hidden');
                }

                $(".itemPrev").on( "click", function() {
                    slider.slick("slickPrev").delay(500);
                    if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {
                        showSliderArrows();
                    }
                    if(amount == 2) {
                        $('.itemPrev').addClass('hidden');
                        $('.itemNext').removeClass('hidden');
                    }
                });
        
                $(".itemNext").on( "click", function() {
                    slider.slick("slickNext").delay( 500 );
                    if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {
                        showSliderArrows();
                    }
                    if(amount == 2) {
                        $('.itemNext').addClass('hidden');
                        $('.itemPrev').removeClass('hidden');
                    }
                });
            }
        });

        var topSection = document.getElementById("firstRow");
        var topPosition = topSection.offsetTop;

        $(window).on('scroll', function() {

            if (window.pageYOffset > (topPosition)) {
                topSection.style.position = 'sticky';
                topSection.style.top = '0';
                topSection.style.zIndex = '100';

            } else {
                topSection.style.position = 'inherit';
                topSection.style.top = 'none';
                topSection.style.zIndex = 'inherit';
            }
        });

        $('body').on('click', '.productWishListAdd-js', function (e) {
            app.productWishListAdd(e);
        });

        $('body').on('click', '.productWishListRemove-js', function (e) {
            app.productWishListRemove(e);
        });

        $('body').on('click', '.removeItem', function (e) {
            app.productComparisonToolDeleteItem(e);
        });

        $('body').on('click', '.removeComparer', function (e) {
            var productIds = $(this).parent('.removeComparerContainer').children($('input [name="productId"]'));
            app.productComparisonToolDeleteAll(productIds);
        });

        function showSliderArrows() {
            var currentProducts = $('.topSection-productInfo');
            var activeProducts = [];
            var i=0;
            currentProducts.each(function() {
                if($(this).attr('aria-hidden') == 'false') {
                    activeProducts[i++] = $(this);
                }
            });
            activeProducts[0].find('.itemPrev').removeClass('hidden');
            activeProducts[0].find('.itemNext').addClass('hidden');
            activeProducts[1].find('.itemNext').removeClass('hidden');
            activeProducts[1].find('.itemPrev').addClass('hidden');
        }
    } 
}

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

var comparerFunctions = {

init: function() {

this.events();

events: function() {

$(document).ready(function(){

$('.propertyValue-js').each(function(index) {

var t = $(this).text();

t = t.replace(/([A-Z])/g, ' $1').trim();

$(this).text(t);

})

$('.row').each(function() {

if(!($(this).hasClass('groupInfo'))) {

$(this).children('.property').css('box-shadow', '2px 0 2px -2px #E5E5E5');

$(this).children('.topSection-info').css('box-shadow', '2px 0 2px -2px #E5E5E5');

}

});

var amount = $('#amount').attr('value');

var windowWidth = $(window).width();

if (amount <= 2) {

$('.topSection-productInfo').css('width', '50%');

$('.propertyValueContainer').css('width', '50%');

if(amount == 1 && windowWidth <= 768) {

$('.productPrice').addClass('oneItem');

$('.productName').addClass('oneItem');

$('.buttons').addClass('oneItem');

$('.lastProduct > *').css('margin-left', '10px', '!important');

$('.lastProduct > *').css('margin-right', '10px', '!important');

} else if(amount == 1 && windowWidth <= 600) {

$('.topSection-productInfo').css('width', '100%', '!important');

$('.propertyValueContainer').css('width', '100%', '!important');

$('.lastProduct').css('display', 'none');

}

if ((windowWidth <= 970 && amount > 2) || (windowWidth <= 742 && amount == 2)) {

$(".row > section").addClass("comparerSlider");

var slider = $('.comparerSlider').slick({

infinite: true,

slidesToShow: 2,

slidesToScroll:1,

draggable: false,

autoplay: false,

autoplaySpeed: 8000,

arrows:false,

swipe:false,

responsive: [

{

breakpoint: 768,

settings: {

slidesToShow: 1,

}

]

});

if(amount == 2) {

slider.slick('slickSetOption', 'infinite', false);

}

if(windowWidth <= 970 && windowWidth > 768 && amount > 2) {

showSliderArrows();

}

if (windowWidth <= 768 && amount > 2) {

$(".itemPrev").removeClass('hidden');

$(".itemNext").removeClass('hidden');

}

if(windowWidth <= 742 && amount == 2) {

$(".itemNext").removeClass('hidden');

}

$(".itemPrev").on( "click", function() {

slider.slick("slickPrev").delay(500);

if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {

showSliderArrows();

}

if(amount == 2) {

$('.itemPrev').addClass('hidden');

$('.itemNext').removeClass('hidden');

}

});

$(".itemNext").on( "click", function() {

slider.slick("slickNext").delay( 500 );

if((windowWidth <= 970 && windowWidth > 768 && amount > 2)) {

showSliderArrows();

}

if(amount == 2) {

$('.itemNext').addClass('hidden');

$('.itemPrev').removeClass('hidden');

}

});

}

});

var topSection = document.getElementById("firstRow");

var topPosition = topSection.offsetTop;

$(window).on('scroll', function() {

if (window.pageYOffset > (topPosition)) {

topSection.style.position = 'sticky';

topSection.style.top = '0';

topSection.style.zIndex = '100';

} else {

topSection.style.position = 'inherit';

topSection.style.top = 'none';

topSection.style.zIndex = 'inherit';

}

});

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

app.productWishListAdd(e);

});

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

app.productWishListRemove(e);

});

$('body').on('click', '.removeItem', function (e) {

app.productComparisonToolDeleteItem(e);

});

$('body').on('click', '.removeComparer', function (e) {

var productIds = $(this).parent('.removeComparerContainer').children($('input [name="productId"]'));

app.productComparisonToolDeleteAll(productIds);

});

function showSliderArrows() {

var currentProducts = $('.topSection-productInfo');

var activeProducts = [];

var i=0;

currentProducts.each(function() {

if($(this).attr('aria-hidden') == 'false') {

activeProducts[i++] = $(this);

}

});

activeProducts[0].find('.itemPrev').removeClass('hidden');

activeProducts[0].find('.itemNext').addClass('hidden');

activeProducts[1].find('.itemNext').removeClass('hidden');

activeProducts[1].find('.itemPrev').addClass('hidden');

}

Następnie należy dodać możliwość dodawania produktów do porównywarki z poziomu szczegółów towaru. Otwórz katalog elements -> product. W zależności do tego, jaką wersję szczegółów towaru wybrałeś w Kreatorze, w katalogu będzie plik product-details-1.html lub product-details-2.html. Wykonaj kolejne kroki w zależności od tego, który plik znajduje się w Twoim Topazie.

Dalsza instrukcja dla pliku product-details-1.html

Otwórz plik i wyszukaj linię, w której znajduje się fragment comparison-tool-add-button. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:


                            {% assign isInComparisonTool = false -%}
                            {% for itemId in customer.ComparisonToolItems -%}
                                {% if itemId == product-details.Product.Id -%}
                                    {% assign isInComparisonTool = true -%}
                                {% endif -%}
                            {% endfor -%}
                           
                                <span id="comparison-tool-add-button" class="product-details__other-option productComparisonToolAdd-js {% if isInComparisonTool == true -%} hidden {% endif -%}">
                                    <span>
                                        <svg class="svgIcon">
                                            <use xlink:href="css/img/icons-sprite.svg#exchange-{{settings.iconStyle}}"></use>
                                        </svg>
                                    </span>
                                    <span>{{translations.Cmp_Compare}}</span>
                                    <input type="hidden" name="__action" value="Product/ComparisonToolAdd"/>
                                    <input type="hidden" name="productId" value="{{ product.Id }}"/>
                                    <input type="hidden" name="url" value="{{ page.BaseHref }}{{ config.DefinedPages.ProductComparisonTool.Url }}"/>
                                    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                                    <input type="hidden" name="comparisonItems" value="{{ customer.ComparisonToolItems | Size }}" />

                                </span>
                         
                                <span id="comparison-tool-delete-button" class="product-details__other-option productComparisonToolDelete-js  {% if isInComparisonTool == false -%} hidden {% endif -%} ">
                                    <span>
                                        <svg class="svgIcon">
                                            <use xlink:href="css/img/icons-sprite.svg#exchange-{{settings.iconStyle}}"></use>
                                        </svg>
                                    </span>
                                    <span>{{translations.RemoveFromComparisonTool}}</span>
                                    <input type="hidden" name="__action" value="Product/ComparisonToolDelete"/>
                                    <input type="hidden" name="productId" value="{{ product.Id }}" data-id="{{product.Id}}"/>
                                    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                                </span>

{% assign isInComparisonTool = false -%}

{% for itemId in customer.ComparisonToolItems -%}

{% if itemId == product-details.Product.Id -%}

{% assign isInComparisonTool = true -%}

{% endif -%}

{% endfor -%}

<span>

</svg>

</span>

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

</span>

<span>

</svg>

</span>

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

</span>

a pod nimi wklej następujący kod:


                    <div class="addToComparePopup">
                        <div class="comparisonInfo">
                            {% assign comparisonToolItems = customer.ComparisonToolItems | Size | Plus: 1  -%}
                            <div class="addToCompare">{{translations.AddedToComparisonTool}} ({{comparisonToolItems}}/4)</div>
                            <span class="closeComparePopup"></span>
                        </div>
                        <div class="comparisonIcons">
                            {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}
                            <span class="comparerItemIcon {% if ComparerItems >= 1 -%} addedToCompare {% endif -%}"></span>
                            <span class="comparerItemIcon {% if ComparerItems >= 2 -%} addedToCompare {% endif -%}"></span>
                            <span class="comparerItemIcon {% if ComparerItems >= 3 -%} addedToCompare {% endif -%}"></span>
                            <span class="comparerItemIcon {% if ComparerItems >= 4 -%} addedToCompare {% endif -%}"></span>
                        </div>
                        <a href="{{config.DefinedPages.ProductComparisonTool.Url}}">
                            <span class="comparisonIcon">
                                <svg class="svgIcon">
                                    <use xlink:href="css/img/icons-sprite.svg#exchange-{{settings.iconStyle}}"></use>
                                </svg>
                                <span class="goToComparisonTool">{{translations.Cmp_Compare}}</span>
                            </span>
                        </a>
                    </div>

{% assign comparisonToolItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

<div class="addToCompare">{{translations.AddedToComparisonTool}} ({{comparisonToolItems}}/4)</div>

</div>

{% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

<span class="comparerItemIcon {% if ComparerItems >= 1 -%} addedToCompare {% endif -%}"></span>

<span class="comparerItemIcon {% if ComparerItems >= 2 -%} addedToCompare {% endif -%}"></span>

<span class="comparerItemIcon {% if ComparerItems >= 3 -%} addedToCompare {% endif -%}"></span>

<span class="comparerItemIcon {% if ComparerItems >= 4 -%} addedToCompare {% endif -%}"></span>

</div>

</svg>

<span class="goToComparisonTool">{{translations.Cmp_Compare}}</span>

</span>

</a>

</div>

Następnie należy dodać kod odpowiadający za wygląd wyskakującego okienka z informacją o dodaniu towaru do porównywarki. Aby to zrobić, przejdź do katalogu css. W pliku layout.css wklej na samym dole następujący kod:


.product-details .addToComparePopup{display:none;position:fixed;z-index:100;right:10%;bottom:51px;transition:200ms;width:400px;height:62px;box-shadow:0 3px 8px #616060;background-color:{{settings.primaryPageBgColor}}}.product-details .addToComparePopup .comparisonIcons{margin-left:25px;display:inline-block}.product-details .addToComparePopup .comparisonIcons .comparerItemIcon{width:5px;height:5px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonIcons .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:6px;line-height:24px;display:block}.product-details .addToComparePopup .addToCompare{display:inline-block;font-size:14px;line-height:24px;margin-left:25px;color:{{settings.primaryFontColor}};font-weight:500}.product-details .addToComparePopup .closeComparePopup{position:absolute;top:0;right:0;margin-right:25px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:14px;height:14px}.product-details .addToComparePopup .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .comparisonIcon{float:right;margin-top:5px;margin-right:2px}.product-details .addToComparePopup .comparisonIcon .svgIcon{fill:{{settings.linkFontColor}};margin:0 5px -3px 0;width:15px;height:15px}.product-details .addToComparePopup .goToComparisonTool{color:{{settings.linkFontColor}};line-height:24px;font-size:14px;font-weight:400;margin-right:25px}

.product-details .addToComparePopup{display:none;position:fixed;z-index:100;right:10%;bottom:51px;transition:200ms;width:400px;height:62px;box-shadow:0 3px 8px #616060;background-color:{{settings.primaryPageBgColor}}}.product-details .addToComparePopup .comparisonIcons{margin-left:25px;display:inline-block}.product-details .addToComparePopup .comparisonIcons .comparerItemIcon{width:5px;height:5px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonIcons .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:6px;line-height:24px;display:block}.product-details .addToComparePopup .addToCompare{display:inline-block;font-size:14px;line-height:24px;margin-left:25px;color:{{settings.primaryFontColor}};font-weight:500}.product-details .addToComparePopup .closeComparePopup{position:absolute;top:0;right:0;margin-right:25px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:14px;height:14px}.product-details .addToComparePopup .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .comparisonIcon{float:right;margin-top:5px;margin-right:2px}.product-details .addToComparePopup .comparisonIcon .svgIcon{fill:{{settings.linkFontColor}};margin:0 5px -3px 0;width:15px;height:15px}.product-details .addToComparePopup .goToComparisonTool{color:{{settings.linkFontColor}};line-height:24px;font-size:14px;font-weight:400;margin-right:25px}

W pliku layout-m.css wklej następujący kod:


@media only screen and (min-width: 461px) and (max-width: 768px){.addToComparePopup{bottom:16px !important;right:15% !important}}
@media only screen and (max-width: 599px){.addToComparePopup{width:100% !important;bottom:0 !important;right:0 !important;left:0 !important}}

@media only screen and (min-width: 461px) and (max-width: 768px){.addToComparePopup{bottom:16px !important;right:15% !important}}

@media only screen and (max-width: 599px){.addToComparePopup{width:100% !important;bottom:0 !important;right:0 !important;left:0 !important}}

A w pliku layout-d.css wklej następujący kod:


@media only screen and (min-width: 769px) and (max-width: 900px){.addToComparePopup{bottom:16px !important;right:15% !important}}

@media only screen and (min-width: 769px) and (max-width: 900px){.addToComparePopup{bottom:16px !important;right:15% !important}}

Pozostało dodać kod w plikach js. Otwórz katalog js a w nim plik layout0.js. Wyszukaj frazę productComparisonToolAdd. Musisz usunąć kilka linii kodu, od znalezionej przed chwilą (włącznie) do najbliższej linii o treści }, (około 11 linii kodu). W miejsce usuniętego kodu, wklej poniższy:


productComparisonToolAdd: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var comparisonItems = data[4].value;
        if(comparisonItems >= 4) {
            $('.addToComparePopup').fadeIn();
            var msg =__translations.MaxItemsInComparisonTool;
            $('.addToCompare').text(msg);
            
        } else {
            var url = data[2].value;
            $.post(null, data, function (result) {
                if (result.action.Result) {
                    $('.addToComparePopup').fadeIn();
                    $('#comparison-tool-delete-button').removeClass('hidden');
                    $('#comparison-tool-add-button').addClass('hidden');
                } else if (result.action.Code != 100) {
                    app.showTemporaryPopup(result.action.Message, 'error');
                }
            });
        }
    },
    productComparisonToolDelete: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var pId = data[1].value;
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },
    productComparisonToolDeleteItem: function (e) {
        var pId = $(e.currentTarget).attr('data-id');
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },  
    productComparisonToolDeleteAll: function (e) {
        e.each(function() {
            var pId = $(this).attr('data-id');
            $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'});
        })
            setInterval(function() { location.reload(); }, 3000);
    },

productComparisonToolAdd: function (e) {

var data = $(e.currentTarget).find('input').serializeArray();

var comparisonItems = data[4].value;

if(comparisonItems >= 4) {

$('.addToComparePopup').fadeIn();

var msg =__translations.MaxItemsInComparisonTool;

$('.addToCompare').text(msg);

} else {

var url = data[2].value;

$.post(null, data, function (result) {

if (result.action.Result) {

$('.addToComparePopup').fadeIn();

$('#comparison-tool-delete-button').removeClass('hidden');

$('#comparison-tool-add-button').addClass('hidden');

} else if (result.action.Code != 100) {

app.showTemporaryPopup(result.action.Message, 'error');

}

});

}

productComparisonToolDelete: function (e) {

var data = $(e.currentTarget).find('input').serializeArray();

var pId = data[1].value;

$.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){

setInterval(function() { location.reload(); }, 1000);

});

productComparisonToolDeleteItem: function (e) {

var pId = $(e.currentTarget).attr('data-id');

$.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){

setInterval(function() { location.reload(); }, 1000);

});

productComparisonToolDeleteAll: function (e) {

e.each(function() {

var pId = $(this).attr('data-id');

$.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'});

})

setInterval(function() { location.reload(); }, 3000);

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:


body.on('click', '.productComparisonToolDelete-js', function (e) {
            app.productComparisonToolDelete(e);
        });

        body.on('click', '.closeComparePopup', function (e) {
            $('.addToComparePopup').addClass('hidden');
        });

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

app.productComparisonToolDelete(e);

});

body.on('click', '.closeComparePopup', function (e) {

$('.addToComparePopup').addClass('hidden');

});

Jeśli posiadasz pierwszą wersję szczegółów towaru, to koniec instrukcji. Dalsza część dotyczy zmian dla wersji drugiej szczegółów towaru.

Dalsza instrukcja dla pliku product-details-2.html

Otwórz plik i wyszukaj linię, w której znajduje się fragment productComparisonToolAdd-js. Musisz usunąć wszystko pomiędzy liniami o treści (włącznie z nimi). Pod usuniętymi liniami kodu znajdują się dwie linie o treści </div> i {% endif -%}. Nad nimi wklej następujący kod:


                    {% assign isInComparisonTool = false -%}
                    {% for itemId in customer.ComparisonToolItems -%}
                        {% if itemId == product-details.Product.Id -%}
                            {% assign isInComparisonTool = true -%}
                        {% endif -%}
                    {% endfor -%}
                    
                    <span id="comparison-tool-add-button" class="product-details__other-option productComparisonToolAdd-js {% if isInComparisonTool == true -%} hidden {% endif -%} {% if fourOprions -%} four-options {% endif -%}">
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#exchange-{{settings.iconStyle}}"></use>
                        </svg>
                        <span>{{translations.Cmp_Compare}}</span>
                        <input type="hidden" name="__action" value="Product/ComparisonToolAdd"/>
                        <input type="hidden" name="productId" value="{{ product.Id }}"/>
                        <input type="hidden" name="url" value="{{ page.BaseHref }}{{ config.DefinedPages.ProductComparisonTool.Url }}"/>
                        <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                        <input type="hidden" name="comparisonItems" value="{{ customer.ComparisonToolItems | Size }}" />
                    </span>
                    

                    <span id="comparison-tool-delete-button" class="product-details__other-option productComparisonToolDelete-js  {% if isInComparisonTool == false -%} hidden {% endif -%} {% if fourOprions -%} four-options {% endif -%}">
                        <span>
                            <svg class="svgIcon">
                                <use xlink:href="css/img/icons-sprite.svg#exchange-{{settings.iconStyle}}"></use>
                            </svg>
                        </span>
                        <span>{{translations.RemoveFromComparisonTool}}</span>
                        <input type="hidden" name="__action" value="Product/ComparisonToolDelete"/>
                        <input type="hidden" name="productId" value="{{ product.Id }}" data-id="{{product.Id}}"/>
                        <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                    </span>

{% assign isInComparisonTool = false -%}

{% for itemId in customer.ComparisonToolItems -%}

{% if itemId == product-details.Product.Id -%}

{% assign isInComparisonTool = true -%}

{% endif -%}

{% endfor -%}

</svg>

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

</span>

<span>

</svg>

</span>

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

</span>

a pod nimi wklej następujący kod:


            <div class="addToComparePopup">
                <div class="comparisonInfo">
                    <div class="addToCompare">{{translations.AddedToComparisonTool}}</div>
                    <span class="closeComparePopup"></span>
                </div>
                <div class="comparisonInfo deleteComparison-js">
                    <div class="comparisonItems">{{translations.ItemsToCompare}}</div>
                    <div class="removeComparison">{{translations.ProductsComparisonRemove}}</div>
                    <input type="hidden" name="__action" value="Product/ComparisonToolDelete"/>
                    <input type="hidden" name="__csrf" value="{{ page.CSRF }}" />
                    <input type="hidden" name="productId" value="{{ product-details.Product.Id}}" data-id="{{product-details.Product.Id}}"/>
                    {% for itemId in customer.ComparisonToolItems -%}
                        <input type="hidden" name="productId" value="{{itemId}}" data-id="{{itemId}}"/>
                    {% endfor -%}
                </div>
                <div class="comparisonInfo comparisonIcons">
                    {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}
                    <span class="comparerItemIcon {% if ComparerItems >= 1 -%} addedToCompare {% endif -%}"></span>
                    <span class="comparerItemIcon {% if ComparerItems >= 2 -%} addedToCompare {% endif -%}"></span>
                    <span class="comparerItemIcon {% if ComparerItems >= 3 -%} addedToCompare {% endif -%}"></span>
                    <span class="comparerItemIcon {% if ComparerItems >= 4 -%} addedToCompare {% endif -%}"></span>
                </div>
                {% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}
                {% if ComparerItems > 1 -%}
                    <a href="{{config.DefinedPages.ProductComparisonTool.Url}}">
                        <div class="goToComparisonTool">{{translations.Cmp_Compare}}</div>
                    </a>
                {% endif -%}
            </div>

<div class="addToCompare">{{translations.AddedToComparisonTool}}</div>

</div>

<div class="comparisonItems">{{translations.ItemsToCompare}}</div>

<div class="removeComparison">{{translations.ProductsComparisonRemove}}</div>

{% for itemId in customer.ComparisonToolItems -%}

{% endfor -%}

</div>

{% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

<span class="comparerItemIcon {% if ComparerItems >= 1 -%} addedToCompare {% endif -%}"></span>

<span class="comparerItemIcon {% if ComparerItems >= 2 -%} addedToCompare {% endif -%}"></span>

<span class="comparerItemIcon {% if ComparerItems >= 3 -%} addedToCompare {% endif -%}"></span>

<span class="comparerItemIcon {% if ComparerItems >= 4 -%} addedToCompare {% endif -%}"></span>

</div>

{% assign ComparerItems = customer.ComparisonToolItems | Size | Plus: 1 -%}

{% if ComparerItems > 1 -%}

<div class="goToComparisonTool">{{translations.Cmp_Compare}}</div>

</a>

{% endif -%}

</div>


.product-details .addToComparePopup{display:none;position:fixed;margin-left:auto;margin-right:auto;right:0;left:0;top:30%;width:30%;height:auto;background-color:{{settings.primaryPageBgColor}};transition:200ms;z-index:100;opacity:1 !important;box-shadow:0 3px 8px #616060}.product-details .addToComparePopup .comparisonIcons{width:calc(100% - 70px);margin:40px auto !important;text-align:center}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:40px;line-height:26px;display:block}.product-details .addToComparePopup .comparisonInfo .comparerItemIcon{width:40px;height:40px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonInfo .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo .addToCompare{margin-left:70px;font-size:18px;font-weight:500;color:{{settings.primaryFontColor}}}.product-details .addToComparePopup .comparisonInfo .comparisonItems{font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};display:inline-block;margin-left:70px}.product-details .addToComparePopup .comparisonInfo .removeComparison{margin-right:42px;margin-top:2px;float:right;font-size:14px;line-height:24px;font-weight:400;color:{{settings.linkFontColor}}}.product-details .addToComparePopup .comparisonInfo .removeComparison:hover{cursor:pointer}.product-details .addToComparePopup .comparisonInfo .closeComparePopup{position:absolute;top:4px;right:0;margin-right:40px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:18px;height:18px}.product-details .addToComparePopup .comparisonInfo .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .goToComparisonTool{width:60%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0;margin:40px auto;display:block}.product-details .addToComparePopup .goToComparisonTool:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}@media only screen and (max-width: 1550px){.product-details .comparisonItems,.product-details .removeComparison{display:block;width:100%;text-align:center;float:none !important}.product-details .comparisonItems{margin:0 auto !important}.product-details .removeComparison{margin:20px auto 0 !important}}

.product-details .addToComparePopup{display:none;position:fixed;margin-left:auto;margin-right:auto;right:0;left:0;top:30%;width:30%;height:auto;background-color:{{settings.primaryPageBgColor}};transition:200ms;z-index:100;opacity:1 !important;box-shadow:0 3px 8px #616060}.product-details .addToComparePopup .comparisonIcons{width:calc(100% - 70px);margin:40px auto !important;text-align:center}.product-details .addToComparePopup .comparisonInfo{width:100%;position:relative;margin-top:40px;line-height:26px;display:block}.product-details .addToComparePopup .comparisonInfo .comparerItemIcon{width:40px;height:40px;margin-right:10px;-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/regular/box.svg) no-repeat 50% 50%;background-color:{{settings.secondaryFontColor}};display:inline-block;padding:10px}.product-details .addToComparePopup .comparisonInfo .addedToCompare{background-color:{{settings.linkFontColor}} !important}.product-details .addToComparePopup .comparisonInfo .addToCompare{margin-left:70px;font-size:18px;font-weight:500;color:{{settings.primaryFontColor}}}.product-details .addToComparePopup .comparisonInfo .comparisonItems{font-size:14px;line-height:24px;color:{{settings.primaryFontColor}};display:inline-block;margin-left:70px}.product-details .addToComparePopup .comparisonInfo .removeComparison{margin-right:42px;margin-top:2px;float:right;font-size:14px;line-height:24px;font-weight:400;color:{{settings.linkFontColor}}}.product-details .addToComparePopup .comparisonInfo .removeComparison:hover{cursor:pointer}.product-details .addToComparePopup .comparisonInfo .closeComparePopup{position:absolute;top:4px;right:0;margin-right:40px;background-color:{{settings.primaryFontColor}};-webkit-mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;mask:url(https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/light/times.svg) no-repeat 50% 50%;width:18px;height:18px}.product-details .addToComparePopup .comparisonInfo .closeComparePopup:hover{cursor:pointer}.product-details .addToComparePopup .goToComparisonTool{width:60%;height:24px;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};transition:200ms;text-align:center;padding:8px 0;margin:40px auto;display:block}.product-details .addToComparePopup .goToComparisonTool:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};cursor:pointer}@media only screen and (max-width: 1550px){.product-details .comparisonItems,.product-details .removeComparison{display:block;width:100%;text-align:center;float:none !important}.product-details .comparisonItems{margin:0 auto !important}.product-details .removeComparison{margin:20px auto 0 !important}}

W pliku layout-m.css wklej następujący kod:


@media only screen and (max-width: 768px){.addToComparePopup{width:calc(100% - 40px) !important}}
@media only screen and (max-width: 330px){.addToComparePopup>.addToCompare{margin-left:20px !important}}

@media only screen and (max-width: 768px){.addToComparePopup{width:calc(100% - 40px) !important}}

@media only screen and (max-width: 330px){.addToComparePopup>.addToCompare{margin-left:20px !important}}

A w pliku layout-d.css wklej następujący kod:


@media only screen and (min-width: 641px) and (max-width: 1077px){.addToComparePopup{width:50% !important}}

@media only screen and (min-width: 641px) and (max-width: 1077px){.addToComparePopup{width:50% !important}}


productComparisonToolAdd: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var comparisonItems = data[4].value;
        if(comparisonItems >= 4) {
            $('.addToComparePopup').fadeIn();
            var msg =__translations.MaxItemsInComparisonTool;
            $('.addToCompare').text(msg);
            
        } else {
            var url = data[2].value;
            $.post(null, data, function (result) {
                if (result.action.Result) {
                    $('.addToComparePopup').fadeIn();
                    $('#comparison-tool-delete-button').removeClass('hidden');
                    $('#comparison-tool-add-button').addClass('hidden');
                } else if (result.action.Code != 100) {
                    app.showTemporaryPopup(result.action.Message, 'error');
                }
            });
        }
    },
    productComparisonToolDelete: function (e) {
        var data = $(e.currentTarget).find('input').serializeArray();
        var pId = data[1].value;
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },
    productComparisonToolDeleteItem: function (e) {
        var pId = $(e.currentTarget).attr('data-id');
        $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){
            setInterval(function() { location.reload(); }, 1000);
        });
    },  
    productComparisonToolDeleteAll: function (e) {
        e.each(function() {
            var pId = $(this).attr('data-id');
            $.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'});
        })
            setInterval(function() { location.reload(); }, 3000);
    },

productComparisonToolAdd: function (e) {

var data = $(e.currentTarget).find('input').serializeArray();

var comparisonItems = data[4].value;

if(comparisonItems >= 4) {

$('.addToComparePopup').fadeIn();

var msg =__translations.MaxItemsInComparisonTool;

$('.addToCompare').text(msg);

} else {

var url = data[2].value;

$.post(null, data, function (result) {

if (result.action.Result) {

$('.addToComparePopup').fadeIn();

$('#comparison-tool-delete-button').removeClass('hidden');

$('#comparison-tool-add-button').addClass('hidden');

} else if (result.action.Code != 100) {

app.showTemporaryPopup(result.action.Message, 'error');

}

});

}

productComparisonToolDelete: function (e) {

var data = $(e.currentTarget).find('input').serializeArray();

var pId = data[1].value;

$.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId},function(d){

setInterval(function() { location.reload(); }, 1000);

});

productComparisonToolDeleteItem: function (e) {

var pId = $(e.currentTarget).attr('data-id');

$.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'},function(d){

setInterval(function() { location.reload(); }, 1000);

});

productComparisonToolDeleteAll: function (e) {

e.each(function() {

var pId = $(this).attr('data-id');

$.post(null,{__action:'product/ComparisonToolDelete',__csrf:__CSRF,productId:pId,__template:'comparer.html'});

})

setInterval(function() { location.reload(); }, 3000);

Otwórz plik layout1.js. Wyszukaj linię o treści app.productComparisonToolAdd(e);. Następujący kod musisz wkleić poniżej kolejnej linii o treści });:


body.on('click', '.removeComparison', function (e) {
            var productIds = $(this).parent('.deleteComparison-js').children($('input [name="productId"]'));
            app.productComparisonToolDeleteAll(productIds);
        });

        body.on('click', '.productComparisonToolDelete-js', function (e) {
            app.productComparisonToolDelete(e);
        });

        body.on('click', '.closeComparePopup', function (e) {
            $('.addToComparePopup').addClass('hidden');
        });

body.on('click', '.removeComparison', function (e) {

var productIds = $(this).parent('.deleteComparison-js').children($('input [name="productId"]'));

app.productComparisonToolDeleteAll(productIds);

});

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

app.productComparisonToolDelete(e);

});

body.on('click', '.closeComparePopup', function (e) {

$('.addToComparePopup').addClass('hidden');

});

Porównywarka towarów w szablonie Topaz

Porównywarka towarów w szablonie Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt