Объединить картинку и описание карточки товара в единую ссылку

[A132]

Приветствую, господа!

А делал ли кто-нибудь такую вещь:

Когда на странице категории выводятся краткие карточки товара, то чтобы перейти на страницу самого товара, нужно кликнуть либо по его фото, либо по наименованию, а все остальные места (в т.ч. и текст с описанием) внутри карточки некликабельны, .

Так вот - есть ли вариант сделать переход на страницу товара при щелчке в любом месте этой краткой карточки? Фото для наглядности в приложении 

[Venter]

46 минут назад, A132 сказал:

Приветствую, господа!

А делал ли кто-нибудь такую вещь:

Когда на странице категории выводятся краткие карточки товара, то чтобы перейти на страницу самого товара, нужно кликнуть либо по его фото, либо по наименованию, а все остальные места (в т.ч. и текст с описанием) внутри карточки некликабельны, .

Так вот - есть ли вариант сделать переход на страницу товара при щелчке в любом месте этой краткой карточки? Фото для наглядности в приложении 

 

 

Пример для Опенкарт 3.0.2.0

Открываем файл catalog/view/theme/default/template/product/category.twig

Находим строки

      <div class="row"> {% for product in products %}
        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">
            <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
			<div>
              <div class="caption">
                <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
				
                <p class="product-description">{{ product.description }}</p>
                {% if product.price %}
                <p class="price"> {% if not product.special %}
                  {{ product.price }}
                  {% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
                  {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
                {% endif %}
                {% if product.rating %}
                <div class="rating"> {% for i in 1..5 %}
                  {% if product.rating < i %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>{% endif %}
                  {% endfor %} </div>
                {% endif %}
				
			 </div>
              <div class="button-group">
                <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
              </div>
            </div>
          </div>
		  
        </div>
        {% endfor %} 
		</div>

И заменяем на

<style>
.product-description, .product-description:hover {
  font-weight: 400;
  color: #666;
  font-size: 12px;
  line-height: 20px;
}
</style>	  
      <div class="row"> {% for product in products %}
        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">
            <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
			<div>
              <div class="caption">
                <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
				<a href="{{ product.href }}" style="display: block;">
                <p class="product-description">{{ product.description }}</p>
                {% if product.price %}
                <p class="price"> {% if not product.special %}
                  {{ product.price }}
                  {% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
                  {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
                {% endif %}
                {% if product.rating %}
                <div class="rating"> {% for i in 1..5 %}
                  {% if product.rating < i %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>{% endif %}
                  {% endfor %} </div>
                {% endif %}
				</a>
			 </div>
              <div class="button-group">
                <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
              </div>
            </div>
          </div>
		  
        </div>
        {% endfor %} 
		</div>

Немного стилей добавил дабы описание продукта было цветом не как ссылка

[A132]

10 часов назад, Venter сказал:

Немного стилей добавил дабы описание продукта было цветом не как ссылка

У меня версия OS2.3, но идею я понял - сделать из краткого описания тоже ссылку и изменить ей стиль обратно на текст. Это вполне рабочий вариант, спасибо за подсказку!

Но есть ли возможность сделать всю карточку единым объектом внутри рамки, чтобы можно было и по пустым местам  кликать, и чтобы при наведении подсвечивались сразу все элементы (и картинка, и название, и описание), а не по отдельности - на что навёл, то и подсветилось?

Змінено 11 червня 2020 користувачем A132

[Venter]

1 час назад, A132 сказал:

У меня версия OS2.3, но идею я понял - сделать из краткого описания тоже ссылку и изменить ей стиль обратно на текст. Это вполне рабочий вариант, спасибо за подсказку!

Но есть ли возможность сделать всю карточку единым объектом внутри рамки, чтобы можно было и по пустым местам  кликать, и чтобы при наведении подсвечивались сразу все элементы (и картинка, и название, и описание), а не по отдельности - на что навёл, то и подсветилось?

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

Но по сути, в тег <a > пихать блочный элемент не валидно, поэтому можно все то дело реализовать на js. Как это сделать тоже можно найти примеры в сети