Wyszukiwarka zaawansowana w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon Topaz, aby obsługiwał wyszukiwarkę zaawansowaną.

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ć

Pierwszym krokiem jest dodanie obiektu wykorzystywanego w wyszukiwarce. Aby to zrobić, 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 Menu producentów i marek a w polu Nazwa podaj manufacturer-brand, po czym kliknij Dodaj. W ten sposób utworzony został obiekt, dzięki któremu wyszukiwarka będzie mogła wybierać spośród producentów i marek.

Następnie należy przypisać obiekt do wyszukiwarki. Podobnie jak przed chwilą, otwórz Panel Administracyjny, a następnie zakładkę Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane. Wybierz zakładkę Strony. Znajdź stronę Wyszukiwanie zaawansowane (18). W tym samym wierszu, w kolumnie z nazwą pliku, wpisz advanced-search.html, a następnie zapisz. Kliknij na pole z napisem Wyszukiwanie zaawansowane (18). Pojawi się lista dostępnych obiektów. Kliknij kwadrat przy utworzonym wcześniej obiekcie manufacturer-brand, by pokazał się znak wyboru (tzw. „ptaszek”). A następnie zapisz.

Kolejnym krokiem jest utworzenie nowego pliku o nazwie advanced-search.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 'elements/advanced-search/advanced-search.html' -%}
{% endblock -%}

{% extends '_layout.html' -%}

{% block pageContent -%}

{% include 'elements/advanced-search/advanced-search.html' -%}

{% endblock -%}

Następnie, przejdź do katalogu elements. Utwórz w nim nowy katalog pod nazwą advanced-search. Przejdź do nowo utworzonego katalogu, a następnie utwórz w nim plik o nazwie advanced-search.html. Do nowo utworzonego pliku wklej poniższy kod:


{% include 'partials/common/breadcrumbs.html' -%}
{% assign filters = products.FilteringOptions.Filters %}
<div class="advancedSearch">
    <input aria-label="searchAdvanced" type="hidden" name="__action" value="Get/SearchAdvanced" />
        <div class="search" id="SearchAdvancedForm" action="{{ page.Url }}{{ page.QueryString | H}}">
            <input aria-label="search" type="search" name="search" class="searchInput advanced-search-input" placeholder="{{translations.SearchElement}}" maxlength="100">

            <select aria-label="searchCategory" class="searchCategory" name="groupId">
                <option aria-label="allCategories" value="">{{translations.AllCategories}} </option> 
            {% for option in page.GroupNodes -%}
                {% assign t = option.Id | Split:',' %}
                <option aria-label="name" value="{{ t[1] }}"><span>{{option.Name}}</span></option>
            {% endfor -%}
            </select>

            <span class="searchButton">{{translations.Com_Search}}</span>
        </div>
        <ul class="searchType">
            <li class="selected">
                <input aria-label="searchwithsequence" id="option1" name="tos" type="radio" class="option search-radio" value="search">
                <label class="js-search-item" for="option1">{{translations.WithSequence}}</label> 
            </li>
            <li>
                <input aria-label="searchwithallwords" id="option2" name="tos" type="radio" class="option search-radio" value="searchAll">
                <label class="js-search-item" for="option2">{{translations.WithAllWords}}</label> 
            </li>
            <li>
                <input aria-label="searchwithanyword" id="option3" name="tos" type="radio" class="option search-radio" value="searchAny">
                <label class="js-search-item" for="option3">{{translations.WithAnyWord}}</label> 
            </li>
            <li>
                <input aria-label="searchwithpartofword" id="option4" name="tos" type="radio" class="option search-radio" value="searchWild">
                <label class="js-search-item" for="option4">{{translations.WithPartOfWord}}</label>
            </li>
        </ul>

        <div class="propertyContainer">
            <div class="title">{{translations.SearchIn}}</div> 
            <div class="switch checkboxContainer">
                <span>
                    <input aria-label="searchInOption2" type="checkbox" class="searchInOption" id="field2" name="fields" value="2">
                    <label for="field2">
                        <p class="checkIcon">
                            <svg>
                                <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                            </svg>
                        </p>
                        {{translations.Pro_ProductDescription}}
                    </label>
                </span> 
                <span>
                    <input aria-label="searchInOption128" type="checkbox" class="searchInOption" id="field128" name="fields" value="128">
                    <label for="field128">
                        <p class="checkIcon">
                            <svg>
                                <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                            </svg>
                        </p>
                        {{translations.Pro_ProductSymbol}}
                    </label>
                </span> 
                <span>
                    <input aria-label="searchInOption256" type="checkbox" class="searchInOption" id="field256" name="fields" value="256">
                    <label for="field256">
                        <p class="checkIcon">
                            <svg>
                                <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                            </svg>
                        </p>
                        {{translations.EanCode}}
                    </label>
                </span> 
                <span>
                    <input aria-label="searchInOption512" type="checkbox" class="searchInOption" id="field512" name="fields" value="512">
                    <label for="field512">
                        <p class="checkIcon">
                            <svg>
                                <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                            </svg>
                        </p>
                        {{translations.Man_ManufacturerCode}}
                    </label>
                </span> 
                <span>
                    <input aria-label="searchInOption4" type="checkbox" class="searchInOption" id="field4" name="fields" value="4">
                    <label for="field4">
                        <p class="checkIcon">
                            <svg>
                                <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                            </svg>
                        </p>
                        {{translations.Pro_productAttributes}}
                    </label>
                </span> 
                <span>
                    <input aria-label="searchInOption8" type="checkbox" class="searchInOption" id="field8" name="fields" value="8">
                    <label for="field8">
                        <p class="checkIcon">
                            <svg>
                                <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                            </svg>
                        </p>
                        {{translations.Pro_ProductCode}}
                    </label>
                </span>
            </div>
        </div>


        <div class="propertyContainer">
            <div class="title">{{translations.Pro_productAttributes}}</div>
            <div class="productFeaturesContainer">
                {% if customer.HidePrices != true -%}
                <div class="priceContainer">
                    <span>
                        <span  class="price">{{translations.PriceFrom}}</span>
                        <div>
                            <input aria-label="priceFrom" id="priceFrom" type="number" name="priceFrom" step="1"
                            min="0" placeholder="0" max="99999" formnovalidate >
                            <label for="priceFrom" class="currency">{{ customer.Currency }}</label>
                        </div>
                    </span>
                    <span>
                        <span class="price">{{translations.PriceTo}}</span>
                        <div>
                            <input aria-label="priceTo" id="priceTo" type="number" name="priceTo" step="1"
                            min="0"  placeholder="0" max="99999" formnovalidate >
                            <label for="priceTo" class="currency">{{ customer.Currency }}</label>
                        </div>
                    </span>  
                    <p class="form__invalid-input" style="display: block;">{{translations.PricesDifference}}</p>   
                </div>
                {% endif -%}

                <div class="switch checkboxContainer productFeatures {% if customer.HidePrices == true -%} hidePricesFeatures {% endif -%} ">
                    <span>
                        <input aria-label="searchInOption1" type="checkbox" class="searchInOption" id="flag1" name="flags" value="1">
                        <label for="flag1">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.WithPhoto}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption2" type="checkbox" class="searchInOption" id="flag2" name="flags" value="2">
                        <label for="flag2">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.NewProduct}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption1024" type="checkbox" class="searchInOption" id="flag1024" name="flags" value="1024">
                        <label for="flag1024">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.Prize}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption64" type="checkbox" class="searchInOption" id="flag64" name="flags" value="64">
                        <label for="flag64">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.ExtraQuality}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption128" type="checkbox" class="searchInOption" id="flag128" name="flags" value="128">
                        <label for="flag128">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.ExtraPrice}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption8" type="checkbox" class="searchInOption" id="flag8" name="flags" value="8">
                        <label for="flag8">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.ProductFromNewsletter}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption4" type="checkbox" class="searchInOption" id="flag4" name="flags" value="4">
                        <label for="flag4">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.Promotion}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption16" type="checkbox" class="searchInOption" id="flag16" name="flags" value="16">
                        <label for="flag16">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.RecommendedProduct}}
                        </label>
                    </span>
                    <span> 
                        <input aria-label="searchInOption512" type="checkbox" class="searchInOption" id="flag512" name="flags" value="512">
                        <label for="flag512">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            <b>{{translations.SellerRecomendation}}</b>
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption32" type="checkbox" class="searchInOption" id="flag32" name="flags" value="32">
                        <label for="flag32">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.Sale}}
                        </label>
                    </span>
                    <span>
                        <input aria-label="searchInOption256" type="checkbox" class="searchInOption" id="flag256" name="flags" value="256">
                        <label for="flag256">
                            <p class="checkIcon">
                                <svg>
                                    <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                </svg>
                            </p>
                            {{translations.BestReviewed}}
                        </label>
                    </span>
                </div>
            </div>
        </div>

		{% if manufacturer-brand.Manufacturer != 0 -%}
            <div class="propertyContainer {% if manufacturer-brand.Brand == 0 -%} lastProperty {% endif -%}">
                <div class="title">{{translations.Manufacturer}}</div> 
                <div class="checkboxContainer">
                    {% assign i = 1 -%}
                    {% for manufacturer in manufacturer-brand.Manufacturers -%}
                        <span>
                            <input aria-label="manufacturerId" type="checkbox" class="searchInOption" value="{{manufacturer.Id}}" id="manufacturer{{i}}" name="manufacturerId">
                            <label for="manufacturer{{i}}">
                                <p class="checkIcon">
                                    <svg>
                                        <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                    </svg>
                                </p>
                                {{manufacturer.Name}}
                            </label>
                        </span> 
                        {% assign i = i | Plus: 1 -%}
                    {% endfor -%}
                </div>
            </div>
        {% endif -%}

		{% if manufacturer-brand.Brand != 0 -%}
            <div class="propertyContainer lastProperty">
                <div class="title">{{translations.Brand}}</div> 
                <div class="checkboxContainer">
                    {% assign i = 1 -%}
                    {% for brand in manufacturer-brand.Brands -%}
                        <span>
                            <input aria-label="brandId" type="checkbox" class="searchInOption" value="{{brand.Id}}" name="brandId" id="brand{{i}}">
                            <label for="brand{{i}}">
                                <p class="checkIcon">
                                    <svg>
                                        <use xlink:href="css/img/icons-sprite.svg#check-regular"></use>
                                    </svg>
                                </p>
                                {{brand.Name}}
                            </label>
                        </span> 
                        {% assign i = i | Plus: 1 -%}
                    {% endfor -%}
                </div>
            </div>
        {% endif -%}
</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

300

301

302

303

304

305

306

307

308

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

{% assign filters = products.FilteringOptions.Filters %}

<option aria-label="allCategories" value="">{{translations.AllCategories}} </option>

{% for option in page.GroupNodes -%}

{% assign t = option.Id | Split:',' %}

<option aria-label="name" value="{{ t[1] }}"><span>{{option.Name}}</span></option>

{% endfor -%}

</select>

<span class="searchButton">{{translations.Com_Search}}</span>

</div>

<label class="js-search-item" for="option1">{{translations.WithSequence}}</label>

</li>

<li>

<label class="js-search-item" for="option2">{{translations.WithAllWords}}</label>

</li>

<li>

<label class="js-search-item" for="option3">{{translations.WithAnyWord}}</label>

</li>

<li>

<label class="js-search-item" for="option4">{{translations.WithPartOfWord}}</label>

</li>

</ul>

<div class="title">{{translations.SearchIn}}</div>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

</div>

<div class="title">{{translations.Pro_productAttributes}}</div>

{% if customer.HidePrices != true -%}

<span>

<span class="price">{{translations.PriceFrom}}</span>

<div>

<input aria-label="priceFrom" id="priceFrom" type="number" name="priceFrom" step="1"

min="0" placeholder="0" max="99999" formnovalidate >

<label for="priceFrom" class="currency">{{ customer.Currency }}</label>

</div>

</span>

<span>

<span class="price">{{translations.PriceTo}}</span>

<div>

<input aria-label="priceTo" id="priceTo" type="number" name="priceTo" step="1"

min="0" placeholder="0" max="99999" formnovalidate >

<label for="priceTo" class="currency">{{ customer.Currency }}</label>

</div>

</span>

<p class="form__invalid-input" style="display: block;">{{translations.PricesDifference}}</p>

</div>

{% endif -%}

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

<b>{{translations.SellerRecomendation}}</b>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

<span>

<svg>

</svg>

</p>

</label>

</span>

</div>

{% if manufacturer-brand.Manufacturer != 0 -%}

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

{% assign i = 1 -%}

{% for manufacturer in manufacturer-brand.Manufacturers -%}

<span>

<svg>

</svg>

</p>

</label>

</span>

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

{% endfor -%}

</div>

{% endif -%}

{% if manufacturer-brand.Brand != 0 -%}

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

{% assign i = 1 -%}

{% for brand in manufacturer-brand.Brands -%}

<span>

<svg>

</svg>

</p>

</label>

</span>

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

{% endfor -%}

</div>

{% endif -%}

</div>

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

Wskazówka

W przypadku problemów z narzędziem Liquid Sync, pliki należy dodać bezpośrednio przez Panel Administracyjny, w zakładce Wygląd sklepu -> Ustawienia -> Edytuj ustawienia zaawansowane -> Edytuj HTML.

Kolejny krok to dodanie odpowiedniej treści do plików .css, odpowiedzialnych za wygląd zaawansowanej wyszukiwarki towarów. W tym celu wróć do głównego katalogu z plikami Topaza, a następnie otwórz katalog css. Do znajdującego się w nim pliku layout.css Wklej na samym dole następujący, już zminifikowany kod:


*{line-height:1.5em}.advancedSearch{max-width:1100px;height:auto;margin:40px auto;user-select:none}.advancedSearch select{-webkit-appearance:none;-moz-appearance:none;text-indent:1px;text-overflow:""}.advancedSearch input[type="checkbox"]{visibility:hidden;width:0;height:0}.advancedSearch .form__invalid-input{visibility:hidden}.advancedSearch .title{font-size:17px;font-weight:600;color:{{settings.primaryFontColor}};margin-bottom:20px;text-transform:uppercase}.advancedSearch .search{width:100%;height:40px;display:flex}.advancedSearch .search .searchInput{width:50%;height:42px;padding-left:20px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none}.advancedSearch .search .searchCategory{width:30%;height:42px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none;padding:0 10px;background-color:{{settings.primaryPageBgColor}};-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:5px;background-position-x:97%;transition:200ms}.advancedSearch .search .searchCategory option:checked{color:#000000 !important}.advancedSearch .search .searchCategory:hover{background-image:url("https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/caret-up.svg") !important}.advancedSearch .search .searchButton{width:20%;height:22px;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};text-align:center;text-decoration:none;text-transform:uppercase;padding:11px 0 7px;font-size:14px;cursor:pointer;transition:200ms}.advancedSearch .search .searchButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};transition:200ms}.advancedSearch .searchType{padding:30px 0 30px 15px;border-bottom:1px solid {{settings.borderColor}};display:block;flex-direction:row;width:calc(100% - 15px);list-style:none}.advancedSearch .searchType li{display:inline}.advancedSearch .searchType li>*{cursor:pointer}.advancedSearch .searchType li input{visibility:hidden;display:none}.advancedSearch .searchType li .option{font-size:14px;color:{{settings.primaryFontColor}};border-radius:50%;background-color:{{settings.primaryPageBgColor}};border:80% solid {{settings.primaryFontColor}}}.advancedSearch .searchType li label{margin:0 30px 0 5px;font-size:14px}.advancedSearch .searchType li label:before{height:15px;width:16px;margin-right:10px;border-radius:50%;border:1px solid #0000005e;content:"";display:inline-block}.advancedSearch .searchType li.selected label:before{border-color:#000000;-webkit-box-shadow:inset 0 0 0 5px #000000;-moz-box-shadow:inset 0 0 0 5px #000000;box-shadow:inset 0 0 0 5px #000000}.advancedSearch .propertyContainer{width:100%;padding:30px 0;border-bottom:1px solid {{settings.borderColor}}}.advancedSearch .propertyContainer .checkboxContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 25%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon{position:relative;top:-14px;left:-25px;fill:{{settings.checkColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon svg{width:12px;height:12px}.advancedSearch .propertyContainer .checkboxContainer span label{margin-left:10px;display:inline-flex;height:20px}.advancedSearch .propertyContainer .checkboxContainer span input:checked+label:before{text-align:center;background-color:{{settings.checkActiveBgColor}};overflow:hidden;border:solid 1px {{settings.checkActiveBgColor}}}.advancedSearch .propertyContainer .checkboxContainer span input+label:before{content:" ";display:inline-block;cursor:pointer;position:relative;width:15px;height:15px;border-radius:4px;background-color:transparent;color:{{settings.borderColor}};border:1px solid {{settings.borderColor}};transition:all 200ms ease;margin-right:10px}.advancedSearch .propertyContainer .checkboxContainer span:hover,.advancedSearch .propertyContainer .checkboxContainer input:hover,.advancedSearch .propertyContainer .checkboxContainer label:hover{cursor:pointer}.advancedSearch .propertyContainer .checkboxContainer:after{content:"";flex:1 0 25%}.advancedSearch .propertyContainer .productFeaturesContainer{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:25%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .price{width:100%;font-size:14px;margin-bottom:10px;color:{{settings.primaryFontColor}};display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{height:40px;width:60%;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};margin-bottom:20px;text-align:right;padding-right:42px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .currency{position:relative;top:0;left:-40px;width:fit-content;margin:0;color:{{settings.secondaryFontColor}};font-size:14px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:75%;margin-top:15px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 33%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span label{margin-left:10px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures:after{content:"";flex:0 1 33%}.advancedSearch .propertyContainer .productFeaturesContainer .hidePricesFeatures{width:100%}.advancedSearch .lastProperty{border:none}

*{line-height:1.5em}.advancedSearch{max-width:1100px;height:auto;margin:40px auto;user-select:none}.advancedSearch select{-webkit-appearance:none;-moz-appearance:none;text-indent:1px;text-overflow:""}.advancedSearch input[type="checkbox"]{visibility:hidden;width:0;height:0}.advancedSearch .form__invalid-input{visibility:hidden}.advancedSearch .title{font-size:17px;font-weight:600;color:{{settings.primaryFontColor}};margin-bottom:20px;text-transform:uppercase}.advancedSearch .search{width:100%;height:40px;display:flex}.advancedSearch .search .searchInput{width:50%;height:42px;padding-left:20px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none}.advancedSearch .search .searchCategory{width:30%;height:42px;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};border-right:none;padding:0 10px;background-color:{{settings.primaryPageBgColor}};-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:5px;background-position-x:97%;transition:200ms}.advancedSearch .search .searchCategory option:checked{color:#000000 !important}.advancedSearch .search .searchCategory:hover{background-image:url("https://static.comarchesklep.pl/files/fonts/fontawesome-pro-5.6.3-web/svgs/solid/caret-up.svg") !important}.advancedSearch .search .searchButton{width:20%;height:22px;background-color:{{settings.primaryBtnBgColor}};color:{{settings.primaryBtnFontColor}};border:1px solid {{settings.primaryBtnBorderColor}};text-align:center;text-decoration:none;text-transform:uppercase;padding:11px 0 7px;font-size:14px;cursor:pointer;transition:200ms}.advancedSearch .search .searchButton:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border:1px solid {{settings.primaryBtnHoverBorderColor}};transition:200ms}.advancedSearch .searchType{padding:30px 0 30px 15px;border-bottom:1px solid {{settings.borderColor}};display:block;flex-direction:row;width:calc(100% - 15px);list-style:none}.advancedSearch .searchType li{display:inline}.advancedSearch .searchType li>*{cursor:pointer}.advancedSearch .searchType li input{visibility:hidden;display:none}.advancedSearch .searchType li .option{font-size:14px;color:{{settings.primaryFontColor}};border-radius:50%;background-color:{{settings.primaryPageBgColor}};border:80% solid {{settings.primaryFontColor}}}.advancedSearch .searchType li label{margin:0 30px 0 5px;font-size:14px}.advancedSearch .searchType li label:before{height:15px;width:16px;margin-right:10px;border-radius:50%;border:1px solid #0000005e;content:"";display:inline-block}.advancedSearch .searchType li.selected label:before{border-color:#000000;-webkit-box-shadow:inset 0 0 0 5px #000000;-moz-box-shadow:inset 0 0 0 5px #000000;box-shadow:inset 0 0 0 5px #000000}.advancedSearch .propertyContainer{width:100%;padding:30px 0;border-bottom:1px solid {{settings.borderColor}}}.advancedSearch .propertyContainer .checkboxContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 25%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon{position:relative;top:-14px;left:-25px;fill:{{settings.checkColor}}}.advancedSearch .propertyContainer .checkboxContainer span .checkIcon svg{width:12px;height:12px}.advancedSearch .propertyContainer .checkboxContainer span label{margin-left:10px;display:inline-flex;height:20px}.advancedSearch .propertyContainer .checkboxContainer span input:checked+label:before{text-align:center;background-color:{{settings.checkActiveBgColor}};overflow:hidden;border:solid 1px {{settings.checkActiveBgColor}}}.advancedSearch .propertyContainer .checkboxContainer span input+label:before{content:" ";display:inline-block;cursor:pointer;position:relative;width:15px;height:15px;border-radius:4px;background-color:transparent;color:{{settings.borderColor}};border:1px solid {{settings.borderColor}};transition:all 200ms ease;margin-right:10px}.advancedSearch .propertyContainer .checkboxContainer span:hover,.advancedSearch .propertyContainer .checkboxContainer input:hover,.advancedSearch .propertyContainer .checkboxContainer label:hover{cursor:pointer}.advancedSearch .propertyContainer .checkboxContainer:after{content:"";flex:1 0 25%}.advancedSearch .propertyContainer .productFeaturesContainer{display:flex;width:100%;flex-direction:row;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:25%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .price{width:100%;font-size:14px;margin-bottom:10px;color:{{settings.primaryFontColor}};display:block}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{height:40px;width:60%;font-size:14px;color:{{settings.secondaryFontColor}};border:1px solid {{settings.inputLabelColor}};margin-bottom:20px;text-align:right;padding-right:42px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span .currency{position:relative;top:0;left:-40px;width:fit-content;margin:0;color:{{settings.secondaryFontColor}};font-size:14px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:75%;margin-top:15px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 33%;margin:10px 0;font-size:14px;color:{{settings.primaryFontColor}}}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span label{margin-left:10px}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures:after{content:"";flex:0 1 33%}.advancedSearch .propertyContainer .productFeaturesContainer .hidePricesFeatures{width:100%}.advancedSearch .lastProperty{border:none}

Do pliku layout-m.css wklej poniższy kod:


@media only screen and (max-width: 768px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch input[type="checkbox"]{position:fixed}.advancedSearch .search{margin-top:20px;display:block;width:100%}.advancedSearch .search .searchInput{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchCategory{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchButton{display:block;width:100%}.advancedSearch .search .scrollingButton{display:block;width:100%;position:fixed;top:0;left:0;z-index:1}.advancedSearch .searchType{margin-top:110px;padding-left:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.advancedSearch .searchType li{display:inline-block;flex:50%;margin-bottom:10px}.advancedSearch .searchType li>label{margin:0}.advancedSearch .propertyContainer{margin:10px 0}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 100%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{flex:1 0 50%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{width:75%}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:100%;display:flex;flex-direction:row;justify-content:space-between}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 100%}}

@media only screen and (max-width: 768px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch input[type="checkbox"]{position:fixed}.advancedSearch .search{margin-top:20px;display:block;width:100%}.advancedSearch .search .searchInput{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchCategory{width:100%;display:block;border-right:1px solid {{settings.inputLabelColor}};margin-bottom:20px}.advancedSearch .search .searchButton{display:block;width:100%}.advancedSearch .search .scrollingButton{display:block;width:100%;position:fixed;top:0;left:0;z-index:1}.advancedSearch .searchType{margin-top:110px;padding-left:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.advancedSearch .searchType li{display:inline-block;flex:50%;margin-bottom:10px}.advancedSearch .searchType li>label{margin:0}.advancedSearch .propertyContainer{margin:10px 0}.advancedSearch .propertyContainer .checkboxContainer span{flex:0 1 100%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span{flex:1 0 50%}.advancedSearch .propertyContainer .productFeaturesContainer .priceContainer span input[type="number"]{width:75%}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures{width:100%;display:flex;flex-direction:row;justify-content:space-between}.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 100%}}

Do pliku layout-d.css wklej poniższy kod:


@media only screen and (min-width: 768px) and (max-width: 1150px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch .search{margin-top:20px}}@media only screen and (min-width: 768px) and (max-width: 1000px){.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 43%}}

@media only screen and (min-width: 768px) and (max-width: 1150px){.advancedSearch{width:calc(100% - 40px);margin:0 auto}.advancedSearch .search{margin-top:20px}}@media only screen and (min-width: 768px) and (max-width: 1000px){.advancedSearch .propertyContainer .productFeaturesContainer .productFeatures span{flex:0 1 43%}}

W ten sposób w Topazie znalazł się kod odpowiedzialny za wygląd wyszukiwarki zaawansowanej.

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). Lista Id oraz fraz do wprowadzenia:
1. AllCategories – Wszystkie kategorie
2. SearchElement – Szukaj towaru…
3. WithSequence – Wyrażenie
4. WithAllWords- Wszystkie słowa
5. WithAnyWord – Dowolne ze słów
6. WithPartOfWord – Część słowa
7. SearchIn – Szukaj w
8. EanCode – Kod EAN
9. PriceFrom – Cena od
10. PriceTo – Cena do
11. PricesDifference – Cena maksymalna musi być większa od ceny minimalnej
12. WithPhoto – Tylko ze zdjęciem
13. NewProduct – Nowość
14. Prize – Nagroda
15. ExtraQuality – Superjakość
16. ExtraPrice – Supercena
17. ProductFromNewsletter – Towar z gazetki
18. Promotion – Promocja
19. RecommendedProduct – Towar polecany
20. SellerRecomendation – Rekomendacja sprzedawcy
21. Sale – Wyprzedaż
22. BestReviewed – Najlepiej oceniany
23. Manufacturer – Producent
24. Brand – Marka

Wskazówka

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

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('.advancedSearch').index() >= 0) {
            advancedSearchFunctions.init();
        }

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

advancedSearchFunctions.init();

}

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


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

    
    events: function () {
        $('body').on('click', '.js-search-item', function (e) {
            $(e.currentTarget).closest('.searchType').children('.selected').removeClass('selected');
            $(e.currentTarget).parent().addClass('selected');
        });

        $('body').on('click', '.checkboxContainer > span', function (e) {
            var input = $(this).children('input');
            if(input.prop("checked") == true) {
                input.prop( "checked", false);
            } else {
                input.prop("checked", true);
            }          
        });
        
        $('body').on('click','.search-radio', function(e) {
            if ($('.search-radio[value=searchAll]').is(":checked")) {
                $('.advanced-search-input').attr('name', 'searchAll');
            } else if ($('.search-radio[value=searchWild]').is(":checked")) {
                $('.advanced-search-input').attr('name', 'searchWild');
            } else if ($('.search-radio[value=searchAny]').is(":checked")) {
                $('.advanced-search-input').attr('name', 'searchAny');
            } else {
                $('.advanced-search-input').attr('name', 'name');
            }
        });

        $('body').on('change', '#priceTo, #priceFrom', function(e) {
            var priceTo = Number($('#priceTo').val());
            var priceFrom = Number($('#priceFrom').val());
            
            if(priceTo != '') {
                $('#priceTo').val(parseInt(priceTo));
            }

            if(priceFrom != '') {
                $('#priceFrom').val(parseInt(priceFrom));
            }

            if(priceFrom > priceTo) {
                $('.form__invalid-input').css('visibility', 'visible');
                $('.searchButton').prop('disabled', true); 
            } else {
                $('.form__invalid-input').css('visibility', 'hidden');
                $('.searchButton').prop('disabled', false); 
            }
        });

        $(window).scroll(function(){
            let scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
            if($('.newsletter1-wrapper')[0]) {
                if ($(this).scrollTop() > 300 && scrollBottom > 20 )  {
                    $('.searchButton').addClass('scrollingButton');
    
                } else {
                    $('.searchButton').removeClass('scrollingButton');
                }

            } else {
                if ($(this).scrollTop() > 300 )  {
                    $('.searchButton').addClass('scrollingButton');
    
                } else {
                    $('.searchButton').removeClass('scrollingButton');
                }
            }      
        });

        $(function(){
            $('body').on('click', '.searchButton', function(e) {
                var t=$(this).parents('.advancedSearch'),hasValue=false,arr=$('#SearchAdvancedForm input[type!=hidden],#SearchAdvancedForm select').serializeArray(),i, data = t.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
                var tab = [];
                for(i in arr) if(arr[i].value) {hasValue=true;break;}
                    data.push({name: "__csrf", value: __CSRF});
                    $.post(null, data, function (d) {
                        if (d.action.Redirect302) location.href = d.action.Redirect302;
                    });
            });
        });
    } 
}

var advancedSearchFunctions = {

init: function () {

this.events();

events: function () {

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

$(e.currentTarget).closest('.searchType').children('.selected').removeClass('selected');

$(e.currentTarget).parent().addClass('selected');

});

$('body').on('click', '.checkboxContainer > span', function (e) {

var input = $(this).children('input');

if(input.prop("checked") == true) {

input.prop( "checked", false);

} else {

input.prop("checked", true);

}

});

$('body').on('click','.search-radio', function(e) {

if ($('.search-radio[value=searchAll]').is(":checked")) {

$('.advanced-search-input').attr('name', 'searchAll');

} else if ($('.search-radio[value=searchWild]').is(":checked")) {

$('.advanced-search-input').attr('name', 'searchWild');

} else if ($('.search-radio[value=searchAny]').is(":checked")) {

$('.advanced-search-input').attr('name', 'searchAny');

} else {

$('.advanced-search-input').attr('name', 'name');

}

});

$('body').on('change', '#priceTo, #priceFrom', function(e) {

var priceTo = Number($('#priceTo').val());

var priceFrom = Number($('#priceFrom').val());

if(priceTo != '') {

$('#priceTo').val(parseInt(priceTo));

}

if(priceFrom != '') {

$('#priceFrom').val(parseInt(priceFrom));

}

if(priceFrom > priceTo) {

$('.form__invalid-input').css('visibility', 'visible');

$('.searchButton').prop('disabled', true);

} else {

$('.form__invalid-input').css('visibility', 'hidden');

$('.searchButton').prop('disabled', false);

}

});

$(window).scroll(function(){

let scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

if($('.newsletter1-wrapper')[0]) {

if ($(this).scrollTop() > 300 && scrollBottom > 20 ) {

$('.searchButton').addClass('scrollingButton');

} else {

$('.searchButton').removeClass('scrollingButton');

}

} else {

if ($(this).scrollTop() > 300 ) {

$('.searchButton').addClass('scrollingButton');

} else {

$('.searchButton').removeClass('scrollingButton');

}

});

$(function(){

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

var t=$(this).parents('.advancedSearch'),hasValue=false,arr=$('#SearchAdvancedForm input[type!=hidden],#SearchAdvancedForm select').serializeArray(),i, data = t.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();

var tab = [];

for(i in arr) if(arr[i].value) {hasValue=true;break;}

data.push({name: "__csrf", value: __CSRF});

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

if (d.action.Redirect302) location.href = d.action.Redirect302;

});

}

Ostatnim krokiem jest dodanie możliwości otwarcia wyszukiwarki zaawansowanej przy pomocy linku umieszczonego w stopce sklepu. Aby to zrobić, przejdź do pliku elements -> footer -> footer-1.html (jeśli w Kreatorze wybrałeś drugi rodzaj stopki, plik będzie nazywał się footer-2.html). Następnie wyszukaj linijkę z frazą advanced-search-link. W linijce tej znajduje się fragment href=”#”. Zamień znak # na {{config.DefinedPages.AdvancedSearch.Url}}. W ten sposób z poziomu stopki będzie można w prosty sposób otworzyć zaawansowane wyszukiwanie.

Wyszukiwarka zaawansowana w szablonie Topaz

Wyszukiwarka zaawansowana w szablonie Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt