Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

Новые шаблоны

Многоцелевые Веб-шаблоны. Обзор страниц магазина

Мы рады представить Вам краткий обзор страниц магазина в Многоцелевых шаблонах.

В Многоцелевом шаблоне доступно несколько страниц магазина:

Multipurpose_Website_Templates._Shop_pages_overview_1

  1. Каталог товаров (Product Catalog) позволяет видеть все доступные в магазине товары:

    Multipurpose_Website_Templates._Shop_pages_overview_2

    Здесь Вы можете изменить/добавить или удалить ваши товары. Для того чтобы внести изменения в страницу каталога товаров, внесите изменения в файл shop-catalog.html из папки site вашего шаблона. Добавьте товары при помощи следующего кода HTML:

    <div class="col-xs-6 col-md-3">
    	<div class="product tumbnail thumbnail-3"><a href="shop-product.html"><img src="images/shop-1.jpg" alt=""></a>
    	 <div class="caption">jQuery);
    
     		<h6><a href="shop-product.html">Short Sleeve T-Shirt</a></h6><span class="price">
     			<del>$24.99</del></span><span class="price sale">$12.49</span>
    	 </div>
    	 </div>
     </div>
  2. Отдельный товар (Single Product) – это пример страницы отдельного товара. Для того чтобы внести в неё изменения, редактируйте файл shop-product.html в папке site. Вы можете скопировать содержимое этого файла, для того чтобы добавить разные отдельные товары на ваш сайт. Этот файл состоит из следующих частей:

    • Изображение товара (Product image) добавляется при помощи кода слайдера галереи:

      <div class="slider">
        <div data-lightbox="gallery" class="swiper-container gallery-top">
      
          <div class="swiper-slide">
        		<div class="swiper-slide-caption"><a href="images/shop-19_original.jpg" data-lightbox="image"><img src="images/shop-19.jpg" alt="" class="img_zoom"></a></div>
        	</div>
        </div>
       </div>
        <div class="swiper-container gallery-thumbs">
        	<div class="swiper-wrapper">
        		<div class="swiper-slide">
        			<div class="swiper-slide-caption"><img src="images/shop-19.jpg" alt=""></div>
        		</div>
        	</div>
        </div>
        </div>
      
    • Раздел Краткое описание товара (Product short description) используется для того, чтобы предоставить краткую информацию о товаре. Этот раздел добавляется при помощи следующего кода HTML:

      <div class="slider">
        <div data-lightbox="gallery" class="swiper-container gallery-top">
      
          <div class="swiper-slide">
        		<div class="swiper-slide-caption"><a href="images/shop-19_original.jpg" data-lightbox="image"><img src="images/shop-19.jpg" alt="" class="img_zoom"></a></div>
        	</div>
        </div>
       </div>
        <div class="swiper-container gallery-thumbs">
        	<div class="swiper-wrapper">
        		<div class="swiper-slide">
        			<div class="swiper-slide-caption"><img src="images/shop-19.jpg" alt=""></div>
        		</div>
        	</div>
        </div>
        </div>
      
    • Для того чтобы добавить Цену и кнопку «Добавить в корзину» (Price and add to cart button), используйте следующий фрагмент кода:

       <div class="col-md-5 text-center text-md-left">     
         <h1 class="text-bold h1-variant-2">Product name</h1><a href="#" class="rating"><span class="fa-star"></span><span class="fa-star"></span><span class="fa-star"></span><span class="fa-star"></span><span class="fa-star-o"></span></a><a href="#" class="text-light-clr">1 customer review</a>
         <p class="big offset-6 line-height-2">
                    Product description here.
         </p>
         <div class="caption"><span class="text-uppercase text-light-clr small">quantity</span><span class="quantity round-xl"><span class="fa-angle-left"></span><span class="num text-dark-variant-3">1</span><span class="fa-angle-right"></span></span><span class="price">
              <del>$24.99</del></span><span class="price sale">$12.49</span><a href="#" class="btn btn-success round-xl btn-sm btn-block offset-6">Add to cart</a>
           <dl class="info-list offset-5">
               <dt>SKU</dt>
               <dd>036895</dd>
               <dt>Categories</dt>
            </dl>
          </div>
       </div>
    • Иконки «Поделиться» (Share icons) добавляются при помощи следующих строк:

           <div class="share offset-6"><span class="small font-secondary text-uppercase text-light-clr">Share this</span>
                <ul class="list-inline list-inline-4 pull-md-right">
                      <li><a href="#" class="fa-facebook text-info"></a></li>
                      <li><a href="#" class="fa-pinterest-p text-danger"></a></li>
                      <li><a href="#" class="fa-twitter text-primary"></a></li>
                      <li><a href="#" class="fa-google-plus text-danger"></a></li>
                      <li><a href="#" class="fa-instagram text-info"></a></li>
                      <li><a href="#" class="fa-rss"></a></li>
                      <li><a href="#" class="fa-envelope text-info"></a></li>
                 </ul>
              </div>
    • Раздел Вкладки товара (Products tabs) используется для предоставления дополнительной информации о товаре. Вы можете добавить дополнительную информацию о товаре, характеристики товара и обзоры при помощи этих вкладок. Ознакомьтесь с нашим видео-туториалом: Как создать и работать над макетом вкладок.

      Multipurpose_Website_Templates._Shop_pages_overview_3

    • Раздел Похожие товары (Related Products), как правило, используется для добавления товаров, которые имеют похожие характеристики с товаром, который отображается на странице. Для того чтобы внести изменения в этот раздел, внесите изменения в файл shop-product.html на строках 409-446. Вот пример кода похожего товара:

      <!--Start section--> 
      	<section class="text-center well well-sm">
      		<div class="container">
      			<h4 class="text-dark-variant-4">Related Products</h4>
      			<div class="row flow-offset-1 offset-5">
      				<div class="col-xs-6 col-md-3">
      					<div class="product tumbnail thumbnail-3"><a href="shop-product.html"><img src="images/shop-4.jpg" alt=""></a>
                      		<div class="caption">
                       			<h6><a href="shop-product.html">Short Sleeve T-Shirt</a></h6><span class="price">
                       				<del>$24.99</del></span><span class="price sale">$12.49</span>
                       			</div>
                       		</div>
                        	</div>
                        </div>
                     </div>
                  </section>
               <!--End section-->

      Multipurpose_Website_Templates._Shop_pages_overview_4

  3. Страница Корзина (Shopping cart) добавляется в файле shop-cart.html. Откройте его в любом редакторе кода, который есть на вашем компьютере (мы советуем использовать NotePad++ или Sublime). Корзина состоит из:

    • Фактическое содержание корзины:

      Multipurpose_Website_Templates._Shop_pages_overview_5

    • Всего в корзине:

      Multipurpose_Website_Templates._Shop_pages_overview_6

  4. Для того чтобы внести изменения в Страницу оформления заказа (Checkout), внесите изменения в файл shop-checkout.html. Страница оформления заказа используется для сбора информации о клиенте и об оплате. Вы можете ознакомиться со скриншотом ниже, для того чтобы узнать, как эта страница выглядит в многоцелевых Веб-шаблонах:

    Multipurpose_Website_Templates._Shop_pages_overview_7

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Многоцелевые Веб-шаблоны. Обзор страниц магазина