Редактирование темы HTML / CSS, но не могу редактировать ее правильно - PullRequest
Новая
       0

Редактирование темы HTML / CSS, но не могу редактировать ее правильно

0 голосов
/ 22 мая 2018

решено *

Я хочу, чтобы изображение было гиперссылкой.Текст уже есть, но я не могу сделать то же самое для изображения.Это в основном имеет наложенное изображение и затем название продукта с гиперссылкой под ним.Мне нужно, чтобы перенаправить изображение по той же ссылке.

Вот код: ------------------ изображение -------------------------- 

<div class="block2"> 
    {% assign product_created_at = product.created_at | date: '%s' %}
    {% assign time_ago = 'now' | date: '%s' | minus: product_created_at | divided_by: 86400 %} 
    {% assign product_new_time = settings.product_new_time | times: 1 %} 

    <div class="block2-img wrap-pic-w of-hidden pos-relative
        {% if time_ago < product_new_time %}block2-labelnew{% endif %}
        {% if on_sale %} block2-labelsale{% endif %}"> 
        <a href="{{ product.url | within: collection }}">
            <img class="" src="{{ product.featured_image.src | img_url: img_size }}" alt="{{ product.featured_image.alt | escape }}">
        </a>
    </div>
</div>

-------------------------------- РАБОЧИЙ ГИПЕРЛИНК ТЕКСТА ----------------------- 

<div class="block2-txt p-t-20">
    <a href="{{ product.url | within: collection }}" class="block2-name dis-block s-text3 p-b-5">
        {{ product.title }}
    </a>
    {% if product.compare_at_price > product.price %}
        <span class="block2-oldprice m-text7 p-r-5"> {{ product.compare_at_price_max | money }} </span> <span class="block2-newprice m-text8 p-r-5"> {{ product.price | money }} </span>
    {% else %}
        <span class="block2-price m-text6 p-r-5"> {{ product.price | money }} </span>
    {% endif %}
</div>

`

РЕЗУЛЬТАТ HTML 

<!-- Block2 -->
<div class="block2">
  
  
  
  <div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy7-t-shirt-with-roll-sleeve">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-15_7ca55ba5-301e-4461-92ea-68c8b02e35e7_1200x1600.jpg?v=1515096104" alt="Boxy7 T-Shirt with Roll Sleeve">
    </a>
    <div class="block2-overlay trans-0-4">
      <a href="/products/boxy7-t-shirt-with-roll-sleeve" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="Add to Cart" onclick="cart.add('8772548722730', 'Boxy7 T-Shirt with Roll Sleeve');">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="/products/boxy7-t-shirt-with-roll-sleeve" class="block2-name dis-block s-text3 p-b-5">
      Boxy7 T-Shirt with Roll Sleeve
    </a>
    
    <span class="block2-price m-text6 p-r-5">
      <span class=money>$20.00</span>
    </span>
    
  </div>
</div>

Солис Ортус помог, и вот результат: 

<div class="block2-img wrap-pic-w of-hidden pos-relative {% if time_ago < product_new_time %}block2-labelnew{% endif %} {% if on_sale %} block2-labelsale{% endif %}">
    <a href="{{ product.url | within: collection }}">
      <img class="" src="{{ product.featured_image.src | img_url: img_size }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
    <div class="block2-overlay trans-0-4" onclick="location.href= '{{ product.url }}'" >
      <a href="{{ product.url }}" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="{{ 'products.product.loading' | t }}" title="{{ 'products.product.add_to_cart' | t }}" onclick="cart.add('{{ product.variants.first.id }}', '{{ product.title }}');">
          {{ 'products.product.add_to_cart' | t }}
        </button>
      </div>
    </div>
  </div>

Это часть CSS, в которой был создан фальшивый курсор 

/* ------------------------------------ */
.block2-overlay:hover {
  opacity: 1;
  cursor: pointer;
}

1 Ответ

0 голосов
/ 22 мая 2018

Связанный пример интернет-магазина не работает для меня в Firefox, потому что темный полупрозрачный оверлейный div находится перед ссылкой.Когда я скрываю оверлей, он работает для меня (изменение указателя мыши).

Подтверждение концепции со встроенным стилем (только для демонстрации).Я спрятал div с помощью display:none;

<div class="block2">
  <div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-03_1200x1600.jpg?v=1514269273" alt="Boxy T-Shirt with Roll Sleeve Detail">
    </a>
    <div class="block2-overlay trans-0-4" style="display: none;">
      <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="" onclick="cart.add('8250556252202', 'Boxy T-Shirt with Roll Sleeve Detail');" data-original-title="Add to Cart">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-name dis-block s-text3 p-b-5">
      Boxy T-Shirt with Roll Sleeve Detail
    </a>

    <span class="block2-price m-text6 p-r-5">
      <span class="money" data-currency-usd="$20.00">$20.00</span>
    </span>

  </div>
</div>

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

Изменить, чтобы ответить на комментарий:

Также оборачиваем div с тегом привязки, не работает для меня (может быть, недействительный HTML?).Вы можете добавить ссылку на div: добавить событие через JavaScript или грязный хак в следующем примере кода: onclick="location.href='/products/boxy-t-shirt-with-roll-sleeve-detail'" на элементе hover и фальшивый указатель мыши с помощью css. 

<div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-03_1200x1600.jpg?v=1514269273" alt="Boxy T-Shirt with Roll Sleeve Detail">
    </a>
    <div class="block2-overlay trans-0-4" onclick="location.href='/products/boxy-t-shirt-with-roll-sleeve-detail'" >
      <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="" onclick="cart.add('8250556252202', 'Boxy T-Shirt with Roll Sleeve Detail');" data-original-title="Add to Cart">
          Add to Cart
        </button>
      </div>
    </div>
  </div>

main.cssв строке 1739: 

/* ------------------------------------ */
.block2-overlay:hover {
  opacity: 1;
  cursor: pointer;
}

Редактировать: Ответ на следующий комментарий на 2018-05-30:

Убедитесь, что кнопка добавления в корзину находится перед парениемпанель.Стоп событие пузырится.

<div class="block2">
  <div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-03_1200x1600.jpg?v=1514269273" alt="Boxy T-Shirt with Roll Sleeve Detail">
    </a>
      <div class="block2-overlay trans-0-4" onclick="location.href='https://fashe-theme.myshopify.com/products/boxy-t-shirt-with-roll-sleeve-detail'">
      <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="" onclick="cart.add('8250556252202', 'Boxy T-Shirt with Roll Sleeve Detail');event.stopPropagation();" data-original-title="Add to Cart">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-name dis-block s-text3 p-b-5">
      Boxy T-Shirt with Roll Sleeve Detail
    </a>

    <span class="block2-price m-text6 p-r-5">
      <span class="money" data-currency-usd="$20.00">$20.00</span>
    </span>

  </div>
</div>

Это означает: мы должны добавить event.stopPropagation(); в onclick кнопки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...